Tengo una variedad de objetos, alrededor de 400 artículos.
El árbol de componentes se parece a esto
App -> Page (useRecoilState(ListAtom) for consumption) -> List -> Item (useSetRecoilState(ListAtom) for mutation) -> Information -> Button En el componente <Item> , muestro algo <Information> que el usuario mirará y haré clic en el botón para activar algo.
Cuando se hace clic en el botón, hace una llamada a mi backend y, si tiene éxito, el botón cambiará su texto.
Todo esto funciona como se esperaba, pero cuando el botón se vuelve a renderizar, provoca que todo el árbol se vuelva a renderizar.
Estoy siguiendo esto: https://recoiljs.org/docs/basic-tutorial/atoms/
Para actualizar un atributo de un elemento en la lista, debe reemplazar ese elemento con una nueva copia y devolver un estado completamente nuevo, esto hará que todo se vuelva a procesar, lo que demora unos segundos.
En <Item> estoy usando useSetRecoilState , así que no me suscribo a los cambios como se describe aquí: https://recoiljs.org/docs/api-reference/core/useSetRecoilState
Estaba pensando que debido a que la memoria hace referencia a estos objetos, sabría que no debe volver a procesar los elementos no mutados, pero parece que este no es el caso.
Es posible que no esté estructurando mi aplicación o usando Recoil correctamente, pero esto parece ser lo que el tutorial de Recoil les está enseñando a hacer a los desarrolladores, ¿alguien tiene alguna idea?
Puede suprimir las reproducciones, lo cual es un proceso laborioso si no creó su aplicación teniendo en cuenta el rendimiento. O puede virtualizar.
https://www.npmjs.com/package/react-intersection-observer
import React from 'react'; import { useInView } from 'react-intersection-observer'; const Item = () => { const { ref, inView, entry } = useInView({ /* Optional options */ threshold: 0, }); if (!inView) return null return ( <div ref={ref}> <h2>{`Header inside viewport ${inView}.`}</h2> </div> ); }; Un return null anticipado (o html de marcador de posición básico) cuando la fila no está visible es una victoria rápida que podría resolver por completo su problema de rendimiento