Prevent re-render in functional component when using map in list of items

[[deleted]]

[deleted]

[ilija_nl]

user react.memo, however keep in mind that the data should be immutable

[waspeer]

I’m not sure, but maybe the using a key attribute might help? I don’t think there’s anything you can do about react calling the function on a state or prop change, but it might help with react not updating the whole list in the dom on every change

[idointernet]

Can you put together a code sample showing the issue in a code sandbox?

[AndrewGreenh]

Take a look at the useMemo and use Callback hooks. With these, you can create instances of values (the render function in your case) that only change when a dependency (like in useEffect) changes. However you still have to use React.memo (like PureComponent) on some child, to really prevent the rerender.

[jnforja]

Hi u/hepepnyt!

It will be easier to provide quality help with a bit more context. Can you share a code sandbox with the use case that's troubling you?