I am about to start a project with React-Redux. For the APIs references there are Hooks and connect(). Since, Hooks are the alternate of connect APIs. What is the difference
What is the difference between using hooks and
connect
to my React-Redux project
There are two major differences:
Scope
connect
can be used with both React class components and function components whereas hooks can be used with function components only.
Performance vs simplicity
Using hooks is simpler. The simplicity comes at a price: you have less performance tweaks at your disposal in comparison with connect
. Which is more complex: you call it passing in configuration options (few or many) and get back the 'configured flavor' of connect
. This flavor is the HOC that you call passing in your component to get it back wrapped.
One of the main configuration options is the already mentioned mapStateToProps
function. You don't have to use it but it most cases you will. There are 4 other functions that exist solely to give you various opportunities to improve the performance of the component you are going to wrap around using connect
. The functions are called:
areStatesEqual
areStatePropsEqual
areOwnPropsEqual
areMergedPropsEqual
All 4 are optional. You can pass in as the connect
configuration options either none or some or all of them and tweak the performance. It's worth noting that even if you pass in none, then the default implementations of those functions (which are effectively performance helpers) will apply and as a result, you will get the wrapped component that is more optimised performance-wise than its hooks-using counterpart.