Tengo una lista de 20 veces, la mayoría de los elementos son solo 1 o 2 oraciones y algunos son imágenes.
Los convertí en una lista horizontal flexible con la intención de crear una lista de transición horizontal.
Esto ralentizó enormemente la aplicación.
Sé que es la cantidad de elementos lo que ralentiza la aplicación porque cuando reduzco la lista a 3 elementos, vuelve a acelerar.
Tengo una computadora multinúcleo Xion. No puede ser el hardware.
¿Cuál podría ser la razón?
Hay muy poca información para elegir una solución específica (por ejemplo: ¿cuántos elementos están visibles en la pantalla al mismo tiempo? ¿La página se desplaza vertical u horizontalmente? ¿La lista está contenida dentro de algún tipo de div ?)
¿Existe la posibilidad de que haya algunos renderizados que no quieras? Por lo general, lo primero que debes hacer es comprobar si tu aplicación se ejecuta lentamente.
Si sus datos se definen/obtienen dentro del ciclo de vida del componente, considere memorizarlos para evitar actualizaciones innecesarias y, eventualmente, a su DOM.
Generalmente, para casos como el que ha descrito, usamos algo llamado virtualización. Es una técnica que le permite representar solo los elementos que realmente deberían estar visibles en ese momento. Eso le permite ahorrar algunos renderizados innecesarios y actualizaciones de DOM en caso de que alguno de los datos cambie. Puede lograr esto mediante el uso de bibliotecas, como react-window o react-virtualized .