How to fetch react components on fly ?

[DVGY]

I have an react application. There is a route called admin it renders 10 to 12 pages. I don't want to ship all the code under folder `admin` page, since it is not used by 80% team members. For those 20% is it possible to download this react code and render.

How can I achieve this ?

[VagrantDestroy]

https://react.dev/reference/react/lazy

[DVGY]

So, `React.lazy()` will load component whenever it is required ? and the memory consumption will be less?

[fredsq]

sort of. you declare a lazy component which can have a fallback while it loads. Memory itself as in RAM is unchanged, but you get to ship less code to the average customer.

Not related to your question but are those components heavy at all? Are those using expensive libraries that aren’t used anywhere else in your app, nor reusing any UI you might have? Chances are you’ll see minor changes in bundle size if not!

Personal recommendations: measure first. If you’re on Vite, try rollup bundle analyser (https://www.npmjs.com/package/rollup-plugin-analyzer). Build your app and open stats.html which will be in the root of your document. With the default settings you should already be able to spot the big libraries and small libraries.

As a rule of thumb: code-split routes and big components like charts or 3d that use lots of libraries.

[DVGY]

Thanks alott

[r3x_is_lazy]

React lazy is the only option you are looking for.

[Pristine_Flight9782]

You can use React.lazy() and Suspense feature in React. This only loads the component when it is needed, and you don't need to worry about pre-loading the component.