Memoizing individual items in array

[rolznz]

Hi, I am doing CRUD on a list of entities. Say the current value is [a,b,c] where a, b and c are objects.

I delete a from the array by doing a DELETE call to my API and then calling the SWR mutate function, which then re-renders the component with the new array [b, c]. b and c have not changed, however they are not the same objects (e.g. originalArray[1] === newArray[0] will return false, comparing b).

This causes re-renders when looping through the array and rendering a component per object (the object has "changed" because React only does shallow comparisons).

Am I right that the best way to solve this is to use React.memo e.g. this is not the responsibility of SWR?

export default React.memo(MyComponent, (prevProps, nextProps) => prevProps.object.id === nextProps.object.id);

Thanks very much!

[koba04]

@rolznz
SWR has a compare option to customize a comparison function to avoid unnecessary re-renders by useSWR.
https://swr.vercel.app/docs/options#options

But in your case, I think it's best to use React.memo to solve it because it's a matter of each element, so the compare option wouldn't help the case.

If you don't want to re-render a component that uses useSWR, the compare option might be your help.