This content originally appeared on DEV Community and was authored by Omololu Emmanuel
This week, I got myself playing around with React Hooks to grasp the underlying concepts on how it works, pros and tradeoffs.
I developed a simple scoreboard mini app for Liverpool FC versus Manchester United. Great idea right?
Here are some highlights on how it went down.
useState
useReducer
Context API + useState
Context API + useReducer
My takeaway from this exercise is that context API gives a high level abstraction and make state accessible to parent component and its children leveraging DRY principle compared to useState and useReducer been implemented with the same logic in multiple components that need the state.
useState and useReducer can be used independently of context API yet it fits perfectly into context API as state management grows.
It really an overkill to implement useReducer when all you have to mutate is a singular state value and also considering its verbose boilerplate. useReducer comes handy when an action mutate multiple state value e.g. in a cart system when you add an item to the cart - item(s) count, item(s) in cart, total cost of item(s) in cart, and possibly more depending on complexity.
Thank you reading. what's your thought on this?
PS: I'll be adding redux and its additives to this post soon. Watch out for this space
This content originally appeared on DEV Community and was authored by Omololu Emmanuel
Omololu Emmanuel | Sciencx (2022-07-23T16:34:25+00:00) State Management in React.Js. Retrieved from https://www.scien.cx/2022/07/23/state-management-in-react-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.