I have a react app that renders a list of cards in a container widget. The container widget has a useEffect where we subscribe to an observable and update the array that is then used to render the cards inside the component. Each time any of the cards change, the observable emits new values resulting in creating of the array all over again and thus all the cards are re-rendered. However this re-render causes a noticeable UI lag.
Here is the stripped down version of code from the container component.
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>
);
The Card component here simply renders the content based on props passed to it. I know that since data is an Object, referential equality may fail and I have tried memoizing the component but even that does not help.
There is a lot more to these components but posting all the code won't make sense. I wish to understand what possibly might be causing the list re-render to be such a heavy operation that the whole UI gets stuck for a second or two. The array contains around only 100 objects or so. It happens whenever changingValue changes. I can share more information as required.
Any suggestions on improving the performance are highly appreciated.
React will mount and unmount the component in DEV mode to validate effect cleaner and any side effect.
I'm concerned about that subscribe and unsubscribe in your effect.
If you want changingValue to be defined why not just wrap it inside an if statement ?
if (changingValue) {
const mySubscription = myObservable$(changingValue)
.subscribe((val) => {
setApiResArray(val.apiArray);
});
obsRef.current = mySubscription;
}
Another observation is at render of items
<Card
data={
{
// a json object with props
}
}
key={res?.hKey} // Why is this a falsy value ?
/>
Falsy value can make key prop change those re-rendering the component, one with React internal key value and another with your implementation value