This demo shows the performance difference between using react-redux's useSelector hook and react-redux's connect higher-order component creator. Each of the components below the big counting number are getting a value from redux. They are also all children of the updating counter,

Use the toggle to switch the components between the two.

You can also change the number of components that are rendered to see the perf impact.

FPS is a very coarse measure of performance, here. To get a better sense of what's going on, open up the browser dev tools and record a performance profile. With 1000 components, useSelector spends 14% of the total time in "scripting" while connect uses 7% of the total time in "scripting":

useSelector (1000):

Connect (1000):

With 5000 components, the frame rate drops of useSelector and saturates the UI thread, while connect still has capacity to spare:

useSelector (5000):

Connect (5000):

Disclaimer: You can avoid the penalty altogether by moving the useSelect/connect components outside of the subtree that's re-rendering. (Or, by fetching the value from redux a single time, rather than in each component). This demo should be seen as a proxy for a complex app where a change in the redux store causes a parent with many children to re-render.

— Steve Rubin, 3/18/2022