Does anyone have an example of React.memo() - Trying to prevent a component from re-rendering caused by high up contextual updates.
This component rendered a PayPal Checkout button for instance, so lots of re-renders makes PayPal pretty upset it seems. Dealing with flashing and random loading failures caused by scripts being loading multiple times, dom elements being removed, etc (this is my guess) - So the solution seems to at least try to prevent this from re-rendering so much.
In this case the component does not recieve any props, but updates close to every 16ms with an internal state change through the reducer(s).
Once this happens not all Layers need to update. They only have to update if specific data changes (listed in the dependencies of React.memo).
Also wrapping the Layer components themselves in a pure React.memo call would not work either, because they are recieving functions through the actions prop. Functions are, when you compare them to each other, never the same and woud cause the layers to update even if no data changed.
With React.useMemo, you have to add a dependency array as the second argument (same as useEffect). useMemo will then only compute the function (given in the first argument) again, if one of the dependencies in the dependency array change.
React.memo is similar, but it is a higher order component, not a hook. That means, you can only add it around one of your components.