Rendering Issue

[maxnathaniel]

Rendering Issue

[MaxMotovilov]

This does not appear to be a problem unique to hookrouter as you ultimately need the components that render your views anyway. This library is very simple and low level so if you want to have on-demand loading of views you have to provide it yourself. I am using HoC wrappers around components that render placeholder content until the component is loaded (i.e. the promise returned by the dynamic import() resolves).

And of course you don't have to have a single routes.js file; you can structure your routes any way you like. My decision to use this library rather than https://github.com/ReactTraining/react-router was based on the former's tiny footprint and simplicity. I am not prepared to pay with bundle sizes for the elaborate functionality I practically never use...

[maxnathaniel]

Thanks for your reply.

I am of the impression that all routers applies lazy loading such that components only gets mounted when the component is navigated to.

However, my interpretation of the comment from this article (https://blog.logrocket.com/how-react-hooks-can-replace-react-router/) is that all components are mounted even before the component is in view. Is that what you are referring to?

[MaxMotovilov]

all routers applies lazy loading such t hat components only gets mounted when the component is navigated to

Lazy instantiation, maybe? Lazy loading implies the JS code is only loaded when it's needed, which would normally be outside the purview of the router library.

all components are mounted even before the component is in view

Not at all. The useRoutes() hook calls user-provided functions; it is entirely up to them to instantiate the components. And of course they will only get mounted after the render function that called useRoutes() returns its result as part of its own.

Frankly, useRoutes() is not all that different from a combination of <Switch> and <Route> in React-router, assuming you pass in a rendering function into <Route>. In both cases you simply write a function that accepts parameters describing the route and returns a React vDOM subtree (an element or a fragment, or what have you). There's little enough code in hookrouter that the quickest way to answer questions about it may be to read it... or step through with the debugger.