I have a list of components (~50-100), these components are quite advanced; they contain a lot of child elements that obviously takes some effort to be drawn out.

The result is that the UI "freezes" 1-2 seconds when navigating to the page, it actually freezes before getting to the page.

The UI is also a bit laggy when all the components are loaded.

I'm thinking it should be possible to load them in chunks in some way? Or only draw the full component out if it's visible on the screen somehow, and have a skeleton component when it's not in the viewport.

What is the recommended approach here?

Thanks in advance.

CodePudding user response：

You must avoid useless renders with memo.

Be careful not to call APIs for no reason.

Also you should use useCallback and useMemo to avoid call methods which return same value for children components.

Context API is a good option to avoid Drilling states as props to nested components.

You could use lazy loading to render children components along with scroll as well.