horizontal list of 20 item massively slow down React App

Question

I have a list of 20 times, most of the items are just 1 or 2 sentences with some being pictures.

I made them into a flex horizontal list with the intention of creating horizontal transition list.

This massively slowed down the APP.

I know that it is the number of items that is slowing down the APP because when I reduce the list to 3 items, it sped back up.

I have a Xion multi core computer. It can't be the hardware.

What could be the reason?

Answer 1

There's too little information to pick a specific solution (for example: how many items are visible on screen at the same time? Does the page scroll vertically or horizontally? Is the list contained within a div of some sorts?)

Is there a possibility that there are some re-renders that you don't want? It's generally a first thing to check if your application runs slowly.

If your data is defined/fetched within the lifecycle of the component, consider memoizing it to avoid unnecessary updates to it, and eventually to your DOM.

Generally, for cases like the one you've described, we use something called virtualization. It's a techique that allows you to only render the elements that actually should be visible at the time. That allows you to save some unnecessary rendering and DOM updation should any of the data changes. You can achieve this by using libraries, such as react-window or react-virtualized.