Tengo una lista con varios miles de productos y cuando hago scroll la aplicación empieza a laguearse mucho. Intenté virtualización común, pero ayuda poco. ¿Quizás hay algún enfoque moderno que me estoy perdiendo?
¿Es que ni siquiera has perfilado la aplicación, o estás adivinando a ciegas? Porque si la virtualización no ayuda, lo más probable es que los lag vengan de que estés rerenderizando toda la lista completa cada vez que cambia el estado - aunque haya solo 20 elementos visibles, React puede estar recalculando datos para los 5000. Intenta envolver los componentes de las filas en `React.memo` y asegúrate de que no estés creando nuevas funciones manejadoras en cada renderizado (usa `useCallback`).
Lo primero: olvídate de la virtualización común si no te ayuda, entonces el problema probablemente no está en el renderizado, sino en que estás cargando demasiados datos de una vez o los recalculas en cada scroll. Verifica que estés usando correctamente `memo`, `useMemo` y `useCallback` - a menudo pasa que los componentes se recalculan por cosas sin importancia. También es útil perfilar la aplicación a través del React DevTools Profiler para ver dónde exactamente está el cuello de botella: puede ser que el problema esté en el renderizado de la lista en sí, o puede ser que en cada scroll hagas peticiones al servidor o recalcules una lógica compleja.
Si ya utilizas virtualización, intenta aumentar el tamaño de la ventana de renderizado (overscan) o cambia a paginación en lugar de scroll infinito - a veces es simplemente más fácil y más rápido.
Fíjate en la memoización de selectores y funciones callback - muchas veces los lag no vienen del renderizado en sí, sino de que en cada scroll se recalculan los filtros, el ordenamiento o se crean funciones nuevas para los manejadores. Intenta envolver los selectores en `useSelector` con la comparación correcta o usa `useMemo` para los cálculos - esto puede dar un aumento de rendimiento mucho mayor que solo la virtualización.
Comprueba cuántos data-atributos y clases le estás agregando a cada elemento de la lista. A menudo los problemas de rendimiento no vienen de la cantidad de nodos DOM, sino de que el navegador recalcula constantemente los estilos y el diseño debido a cambios de clases al hacer scroll. Si dinámicamente agregas clases para elementos activos o al pasar el cursor, eso puede convertirse en un cuello de botella. Intenta mover eso a CSS usando `nth-child` o una capa separada con `position: fixed` para que el navegador no afecte la lista principal.
Segundo: asegúrate de que no estés creando objetos nuevos en las props en cada renderizado. Por ejemplo, si pasas `style={{ color: item.color }}` en lugar de un valor precalculado, React verá objetos diferentes y volverá a renderizar el componente. Incluso con memoización esto puede ralentizar. Es mejor preparar los estilos de antemano o usar variables CSS.
Y otra cosa más: si tienes miles de elementos en la lista, incluso la virtualización puede ser lenta si estás creando demasiados nodos DOM dentro de la ventana visible a la vez. Intenta reducir la cantidad de filas que se renderizan de una sola vez - muestra solo la parte visible más un pequeño buffer arriba y abajo. En la mayoría de las bibliotecas de virtualización se configura esto mediante un parámetro como `overscanRowCount`.
En realidad, la virtualización generalmente funciona muy bien, pero si realmente ayuda con el renderizado, entonces los lags vienen de otro lado. Un problema frecuente que se pasa por alto: puede que tengas un problema con el scroll infinito y la carga de datos. Si en cada scroll solicitas una nueva porción de productos del backend y no cacheas los resultados, el navegador se ralentiza no por los nodos del DOM, sino por las demoras de red y el parseo de JSON.
Lo segundo que conviene revisar es si configuraste correctamente los tamaños de la virtualización. A menudo la gente establece una altura de elemento demasiado pequeña en la configuración, y la librería como react-window empieza a recalcular los elementos visibles prácticamente en cada píxel de scroll. Intenta aumentar el buffer e indicar explícitamente la altura de la fila, en lugar de confiar en el cálculo automático.
Iniciar sesiónpara responder.
