Tengo una aplicación de reacción que muestra una lista de tarjetas en un widget de contenedor. El widget de contenedor tiene un efecto de uso donde nos suscribimos a un observable y actualizamos la matriz que luego se usa para representar las tarjetas dentro del componente. Cada vez que alguna de las tarjetas cambia, el observable emite nuevos valores que dan como resultado la creación de la matriz nuevamente y, por lo tanto, todas las tarjetas se vuelven a representar. Sin embargo, esta nueva representación provoca un retraso notable en la interfaz de usuario.

Aquí está la versión simplificada del código del componente contenedor.

 const obsRef = useRef<Subscription>(null); const [apiResArray, setApiResArray] = useState([]); useEffect(() => { if(obsRef.current) obsRef.current.unsubscribe(); const mySubscription = myObservable$(changingValue) .subscribe((val) => { setApiResArray(val.apiArray); }); obsRef.current = mySubscription; return () => { obsRef.current && obsRef.current.unsubscribe(); }; }, [changingValue])

 return ( <CardWrapper $showMenu={showMenu}> { apiResArray.map((res, resIndex) => { return ( <Card data={{ // a json object with props }} key={res?.hKey} /> ); })} </CardWrapper> );

El componente Card aquí simplemente representa el contenido en función de los accesorios que se le pasan. Sé que dado que los datos son un Objeto, la igualdad referencial puede fallar y he intentado memorizar el componente, pero incluso eso no ayuda.

Hay mucho más en estos componentes, pero publicar todo el código no tendrá sentido. Deseo entender qué podría estar causando que la lista se vuelva a renderizar como una operación tan pesada que toda la interfaz de usuario se atasca durante uno o dos segundos. La matriz contiene alrededor de solo 100 objetos más o menos. Ocurre cada vez que changingValue ChangingValue. Puedo compartir más información según sea necesario.

Cualquier sugerencia para mejorar el rendimiento es muy apreciada.