En mi proyecto de reacción, estoy usando el paquete react-window para generar listas anidadas. Cada fila principal FixedSizeList representa un componente que utiliza otra FixedSizeList . La lista principal no tiene más de 14 filas en este momento. Pero la Lista secundaria puede contener hasta 2000 filas. Ahora mi problema es que, cuando trato de desplazarme por la lista principal, todos los elementos de la lista secundaria en la ventana gráfica parecen volver a aparecer. Esto es un poco problemático para mí porque en el elemento de mi lista de niños estoy usando d3js para dibujar un gráfico de barras con efecto de transición. Entonces, esta renderización innecesaria está dando una interfaz de usuario extraña en general. ¿Alguien puede ayudarme? ¿Cómo puedo detener estos renders innecesarios?
Aquí hay un enlace de codesandbox a un ejemplo muy simple de mi problema. Abra el registro de la consola. Después de la carga inicial, el registro superior debería ser así: registro de consola inicial .
Luego, si borra la consola y se desplaza por la lista principal, verá un registro como este: registro de la consola después del desplazamiento principal . Aquí puede ver que los elementos de la lista de niños de la lista de niños 0 se están volviendo a representar, lo que no es necesario para mí.
¿Alguien puede darme una solución que pueda detener estos renderizados?
* PD: no estoy usando memo ya que cada fila actualiza el dom por sí solo.
Editar
Creo que este problema se resolvería si la lista de padres dejara de propagar el evento de desplazamiento al niño. Traté de agregar event.stopPropagation() y event.stopImmediatePropagation() en la fila de la lista principal, pero el resultado fue el mismo que antes.
Podemos usar memo para deshacernos de los componentes que se vuelven a renderizar innecesariamente para el mismo conjunto de props . Y use useCallback para evitar la recreación de una función y, por lo tanto, asegurar que los componentes secundarios se vuelvan a procesar. Aplicando estos, podemos obtener esta solución:
import "./styles.css"; import { FixedSizeList as List } from "react-window"; import { memo, useCallback } from "react"; const Row = memo(({ index: parentIndex, style: parentStyle }) => { console.log("rendering child list", parentIndex); const InnerRow = useCallback(({ index, style }) => { console.log("rendering child list item", index, "of parent ", parentIndex); return <div style={style}>Child Row {index}</div>; }, []); return ( <div style={parentStyle}> <List height={200} itemCount={1000} itemSize={35} width={270}> {InnerRow} </List> </div> ); }); const Example = () => { console.log("rendering parent list"); return ( <List height={400} itemCount={16} itemSize={300} width={300}> {Row} </List> ); }; export default function App() { return ( <div className="App"> <Example /> </div> ); }aunque el código anterior funciona bien, se puede optimizar más si usamos el método areEqual de react-window de react memo de reacción. Y para más, si queremos usar otros ganchos de reacción dentro del componente InnerRow , debemos agregar un componente de middleware de InnerRow . El ejemplo completo se muestra a continuación:
import { FixedSizeList as List, areEqual } from "react-window"; import { memo, useCallback } from "react"; const Row = memo(({ index: parentIndex, style: parentStyle }) => { console.log("mounting child list", parentIndex); const data = new Array(15).fill(new Array(500).fill(1)); const InnerRowCallback = useCallback( ({ index, style }) => { return <InnerRow index={index} style={style} />; }, [data] ); const InnerRow = ({ index, style }) => { console.log("mounting child list item", index, "of parent ", parentIndex); return <div style={style}>Child Row {index}</div>; }; return ( <div style={parentStyle}> <List height={200} itemCount={1000} itemSize={35} width={270}> {InnerRowCallback} </List> </div> ); }, areEqual); const Example = () => { console.log("mounting parent list"); return ( <List height={400} itemCount={16} itemSize={300} width={300}> {Row} </List> ); }; export default function App() { return ( <div className="App"> <Example /> </div> ); } Aquí estoy pasando la matriz de data como dependencia de useCallBack porque quiero volver a representar el componente InnerRow si data cambian.