Rendering Issue

[maxnathaniel]

Hi,

I am in the process of deciding if I should try out this for my new project. However, I saw a comment on an article that is of concern.

Can I verify if this comment is true?

I quote -

"An issue that keeps coming up in larger applications is the number of components imported for a “routes” file, as it needs each component to render for every path defined. So the more routes you have the more components need importing."

Thank you.

[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.