React Redux is the official React UI bindings layer for Redux and very popular nowadays. It lets your React components read data from a Redux store, and dispatch actions to the store to update state.
And if you are familiar with React Redux, you would come across the confusion when choosing between connect and useSelector to get values from the store, and they can have the same outcomes.
Less boilerplate code
To be clear, connect is a high-order component, useSelector is a hook. Using useSelector can reduce the boilerplate code and embeds that logic within the components themselves.
Better performance
Like I said above, connect is a HOC, which means you pass your own component, and connect returns a wrapper component that does all the work of subscribing to the store, running your mapState and mapDispatch, and passing the combined props down to your own component. And the connect will make your component renders if the props passing down changed, beside that, all the new values from the mapState also causes it to re-render, and the component acts the a PureComponent . This means connect has better performance by default
On the other hand, useSelector is just a hook that you called inside your function components, and you have no way to alter the rendering when the parents props changed. This is a very important when it comes to optimization, but you can optimize the function components that use useSelector with useMemo to prevent unnecessary re-renders
Stale Props and “Zombie Children”
useSelector has some very edgy cases where it has problems, more in-depth information has covered in the docs.
Conclusion
I recommend useSelector when you are new to React and React Redux. But when you understand what you are optimizing, then choose the method that best suits your approach.
Last Words
Although my content is free for everyone, but if you find this article helpful, you can buy me a coffee here
