Alright, so the big news in React the past week has been the proposal of Hooks. People seem to be embracing and flocking to them like crazy.
I'm still not fully understanding of exactly when to use them versus a class component's state or Redux reducer.
Does the addition of hooks mean that redux is no longer needed? Or do hooks still provide only per-component state management, instead of a top-down global state manager?
If they are the next best thing, I would love to use them...but I also want to understand them first, so I don't misuse them. I've done some smaller applications in React, but maybe I'm just not proficient enough to spot where hooks gain competitive edge over Redux's connect or dispatch.
Please help me to understand 😄
Top comments (6)
Hey Daniel, hooks are an implementation of the function composition pattern made popular by the
recomposelibrary. They're purpose is to abstract logic and make it reusable and available to multiple, function components. The biggest difference here is the ability to instantiate a state and to access life cycle events. However, hooks are not a replacement for Redux. If any feature was to replace Redux, it would be Context not Hooks. We use Redux to avoid Top-to-Bottom state management by allowing some application state to be shared by unrelated components. Essentially, if two parallel components share state, we use Redux to avoid having to create a parent component whose sole purpose is to manage state for those two parallel components. Finally, you can use hooks to interact with Redux but not replace it.To my understanding hooks are a new and additional way to access and alter component state as well as give you access to the component lifecycle methods. You could more or less do the same things as you could do using class components. Since hooks are functions they can be reused more easily throughout the application. In my opinion, the big advantage of hooks is that you don't need to use a JavaScript-class to access state/lifecycle methods. I don't like using classes so I am glad "this" is over 😜
That said, if you want you can still use class based components the way you always did.
So if you app "needs" redux right now it will continue to do so. One thing though, using context became also a little bit easier as well. So maybe the threshold of one switching to a global state management shifted a little bit towards using context a little bit longer, but that is completely up to personal preference.
For more information this talk from Dan Abramov introducing hooks is a great start: youtu.be/dpw9EHDh2bM?t=682
Also I would recommend continue watching Ryan Florence talk right afterwards (also in the video linked above)
Hooks are just a new way of adding state to a component, previously we couldn't attach state to function components we could maintain state in a class component that could pass it down to a function component through props but with hooks we can move that state down to the function component, hooks don't solve the problems that redux does (i.e. prop drilling, predictable state updates through reducers etc.) so no redux won't be replaced. Hope this answer helps.
Check out my post in dev.to where i showed how to use useReducer hook
Do you have a new link where I can check this out? Your link 404s now.
Maybe try this? 😏 Reto
A replacement for redux, built with hooks and Context API.