React performance issue rendering of thousands of components

Question

We have a small react application where we have a page where we render very large xml in the collapsible tree format.

XML is about 10k Lines. We have various components for xml opening, closing tags, body and attributes and so on. This is read only xml view with only option to collapse and expand xml tags. This takes about 6-7 seconds to render.

Is there any way to speed this up?

Answer 1

1. Load the components only which you need (react loadable / dynamic imports and React.lazy)
2. Re-render only those parts which you need to (React.memo with useMemo() and useCallback())
3. Before fixing re-renders, fix slow renders
4. Render only parts visible in windows(react window)