rm-rf rm-rf - 1 month ago 6
React JSX Question

Nested Menu Performance - Considering Technologies

Long stay made short, marketing wnats our entire sitemap (5000 pages) in one menu. After 1 year of fighting them on this, there is no winning and we must implement.

We are currently evaluating technologies that will help us make this decision.

Some menu items will have recursive nested levels 5 items deep(insane I know).

The data is driven from JSON because our sitemap is stored in XML in an archaic CMS (Ektron).

I am considering React but there may be no answer. We are looking for a JavaScript library that will help us achieve this and improve performance. Currently our menu alone takes 4 seconds to load for a desktop computer with a half decent Internet connection.

Question; Is using React for this a good idea? If not, are there any other options for us to consider.

Many thanks.

Answer

Take a look at React Infinite

When a long list of DOM elements are placed in a scrollable container, all of them are kept in the DOM even when they are out the user's view. This is highly inefficient, especially in cases when scrolling lists can be tens or hundreds of thousands of items long. React Infinite solves this by rendering only DOM nodes that the user is able to see or might soon see. Other DOM nodes are clustered and rendered as a single blank node.