While learning React and React-redux at Flatiron, it became very apparent that there were two sides… class components and functional components. Most of my friends in class immediately were drawn to functional components, why you ask? A little or big thing called Hooks. Now, I have been more hesitant or just scared to learn/implement this addition to React. Not sure why but in this blog we will be conquering my fear of Hooks!
Hooks is a new-ish addition to React since about 2019, this update allows the developer to extract stateful logic from a component so it can be tested independently and reused as well as allowing you to reuse that stateful logic without changing your component hierarchy. Some other great little aspects of Hooks are (and this one may be the most obvious), you do not need to write class components, they operate within functional components so no more this.props.user.id and the agony of remembering the this keyword when passing props or updating state! Another part of Hooks that I love is that you can try Hooks in a few components without having to change every file and/or component. So, if you have an old project (like me) that you want to test out Hooks in, well you go girl make it happen!
Now the concept of Hooks within a React application is very manageable and makes your code much cleaner. Hooks within React-Redux has a few new surprises that make our life a bit easier…
- useSelector: pass in a function that takes the state as an argument and returns a value. This can act as a replacement for mapStateToProps.
- useDispatch: returns a reference to the dispatch object. This can also act as a replacement to mapDispatchToProps.
With these two new changes, we do not need to import and wrap the component with a connect(). We completely take away the need for this… Some Benefits of using these new toys (aka useSelector & useDispatch) are:
- You save time by not writing the connect function any time you need to access store, and removing it when you no longer need to access store. No endless wrappers in react dev-tools.
- You have clear distinction and no conflicts between props coming from connect, props coming from parent and props injected by wrappers from 3rd party libraries. (props aren’t diluted with the store components, so props are actual props)
- Sometimes you (or fellow developers you work with) will choose unclear names for props in mapStateToProps and you will have to scroll all the way to mapStateToProps in the file to find out which selector is used for this specific prop. This is not the case with hooks where selectors and variables with data they return are coupled on the same line.
- By using hooks you get general advantages of hooks, the biggest of which is being able couple together and reuse related stateful logic in multiple components.
Below are two examples of components before Hooks and after:
Hooks are quickly becoming the future of React so it’s only right we start to give them the props the deserve! Please refer to the documentation for all your hooks within React-Redux needs and go make those class components disappear!
sources:
https://dev.to/gsto/new-redux-hooks-a-before-and-after-comparison-are-they-better-loj
https://thoughtbot.com/blog/using-redux-with-react-hooks
