Redux selectors with shallow comparison

You'll remember that the useSelector hook exported by the React Redux package introduces internal logic that only forces a re-render if the selector result appears to be different than the last result.

In version 7 of React Redux, a different result is determined by a strict reference comparison, using === under the hood to compare the new and previous values. If they're different, it will force a re-render.

That means if we return the same values in a different object reference, it will always re-render even if they're the same. Let's see this situation with a real example:

Figure 12.7 – Google Chrome console showing a strict reference comparison

Internally, what really matters to the useSelector hook to decide whether to re-render or not is the reference returned by the selector. It doesn't matter if other sections of the root state were updated; what matters is if the exact...