Prevent Re-render On A PureComponent When Passing An Object

When using PureComponents you have the advantage over functional components that the component is not always rendered when the parent updates. It actually only renders when there i

Solution 1:

You have to store that object somewhere so that it does not get generated in each rerender. That also applies to functions which are generate during render (dismissClicked={() => hell}).

The functions should be outside if the render function so that they don't get created for every render like this: dismissClicked={this.hell}

For objects, just save it in the state.

You can achieve exactly the same with functional components. Use memo to wrap the component to enable a shallow comparison.

To prevent function generation on each render use useCallback and useState to save the object you are passing to the children so the references stay the same.

You can update these objects with useEffect easily.

Hope this helps. Happy coding.