const [items, setItems] = useState([]); const updateItem = (updatedItem) => { setItems(items.map((item) => { if (item.id === updatedItem.id) return updatedItem; return item; }); };Para volver a renderizar, actualizo una matriz como la del ejemplo.
No creo que sea eficiente, porque cuando se necesita actualizar un elemento, se copia toda la matriz. Si la longitud de los elementos es 100.000, para actualizar un elemento, copia todos los elementos, ¿no?
¿Es inevitable?
Para agregar un elemento, puedo escribir un código como el siguiente:
const addItem = (newItem) => { setItems(items.concat(newItem)); // instead of [...items, newItem] }No estoy 100% seguro, pero creo que puede ser más eficiente.
¿Cómo puedo evitar el trabajo innecesario?
La respuesta corta: no hay una opción simple para eso y más, esto no es un cuello de botella cuando hablamos del rendimiento de React.
La respuesta larga: React necesita saber cuándo cambiaron los datos. Y por razones de rendimiento, se decidió verificar la igualdad de enlaces para el objeto y las matrices. Si los enlaces son los mismos, entonces no cambiaron los datos.
Solo imagine la situación opuesta: tiene un objeto complejo y cambió una propiedad en algún lugar profundo. Ahora necesita recorrer recursivamente el árbol y comparar todos y cada uno de los valores, incluidos otros objetos.
Sin embargo, si le preocupa el rendimiento en React, debe buscar optimizaciones de renderización. Esta es la razón principal de los problemas de rendimiento.