Tengo el siguiente bucle (simplificado):
const ExpensiveItems = useMemo(() => { return items.map((item, idx) => { const style = { marginTop: V_GAP, ...(idx === items.length - 1 && { marginBottom: V_GAP }), }; return <ExpensiveComponent style={style} item={item} />; }); }, [items]); return loading ? <div>Loading...</div> : <div>{ExpensiveItems}</div> Siempre que los items cambien, la función ExpensiveComponent se llamará N veces, donde N es la longitud de los items . ¿O React diferenciará los accesorios primero y solo volverá a llamar a la función ExpensiveComponent si y solo si los accesorios han cambiado?
Esta es posiblemente una optimización prematura, pero si la función ExpensiveComponent se llamará N veces cada vez que cambie la matriz de items , me gustaría evitar llamarla N veces si es posible, ya que generalmente como máximo 1 elemento en la matriz de items cambiará en un tiempo dado.
Entonces, la pregunta es: si volver a llamar a items.map llamará a la función ExpensiveComponent N veces, ¿hay alguna manera de optimizar aún más esta función de map para que si un solo elemento en la matriz de items cambia, no lo haga?
Siempre que los artículos cambien, la función ExpensiveComponent se llamará N veces, donde N es la longitud de los artículos.
Sí, lo hará, a menos que ExpensiveComponent sea un PureComponent (que solo se vuelve a renderizar si los accesorios cambian).
Pero este es un problema extraño: la representación de los componentes no debería ser costosa en absoluto, a menos que tenga muchos de ellos y tengan una cantidad irrazonable de niños cada uno. De lo contrario, si la representación es costosa, debe refactorizarlos para que solo realicen el cálculo costoso cuando realmente lo necesiten, y no en cada nueva representación.
Solo por ejemplo, no hagas
const ExpensiveComponent = ({ style, item }) => { const result = someBigCalculation(item); // ... return <div>{result}</div> }en lugar de hacer
const ExpensiveComponent = ({ style, item }) => { const [result, setResult] = useState(); useEffect(() => setResult(someBigCalculation(item)), [item]);En un código estructurado decentemente, ejecutar el nivel superior de un componente para volver a renderizar no debería ser costoso en la gran mayoría de las situaciones, aunque hay algunas excepciones.