useState vs. useReducer in React: Picking the Right State Management Hook
If you want to land a web development job, you’d have a better chance of succeeding if you learn the React JavaScript library. React is one of the most used libraries in the industry. And one of the most interesting features of the React library is the concept of hooks.
Hooks are simply JavaScript functions that isolate and enable you to reuse logic in a React application. For state management, there are two main hooks available to you—theuseStatehook and theuseReducerhook.
Overview of the useState Hook
TheuseStatehook is the most common way to handle state in React. The syntax below illustrates how to use this hook in your application:
In the code block above, thestatevariable holds data in memory between renders. AndsetStateis the “setter” function that manipulates thestatevariable.
TheuseStatehook returns an array with exactly two elements. It also takes in an initial value for the state variable.
For example, if want to define a state variable that represents the age of the user, with an initial value of 17, this is how you would do it:
ThesetUserAgefunction is responsible for modifying theuserAgestate variable.
It is important to note that updating the state, triggers a component rerender, and updating a state variable improperly can result in an infinite loop that can break your code.
In React, it is not advisable to modify the state directly (as shown in the code block below), because changes to non-state variables do not persist between component renders.
The state is local to the component that defines it. If you have the same components rendered on the screen multiple times, each component will have its own independent state.
In the code block above, there are twoSwitchcomponents, but each component handles its own state and does not rely on the other component unless one component shares its state with the other component.
React handles state updates by batching. This means that when you call a state variable’s setter function, the state variable is not updated until the next re-render.
Overview of the useReducer Hook
useReducer is a React hookthat can come in handy whenever you want to handle multiple related states at the same time. The syntax foruseReducerlooks something like this:
Compared touseState, inuseReducer, there is astatevariable and adispatchfunction that sends actions up to thereducerfunction that handles payloads and updates thestate.
For example, let’s say that you are building a simple counter application with buttons that can reset the counter, increase the counter value, or decrease the counter value. UsinguseStateyour code will look something like this:
The above implementation works perfectly. But you can also achieve the same results with the help of theuseReducerhook.
This example is simply meant to demonstrate how theuseReducerhook works. In a real-world application,useReduceris overkill for this scenario.
useReducermakes it easier to handle related states and complex logic based on thetypepassed in the dispatchedactionobject.
For example, the dispatch function could send anactionobject that looks something like this:
First import theuseReducerhook, then define thereducerfunction with the parameters:stateand the destructuredactionobject.
After defining thereducerfunction, you’re able to build theCountercomponent with theuseReducerhook.
In the code block above, the first button dispatches an action of typecountIncreasewith a payload ofcount + 1. This action is responsible for incrementing the count value.
The second button dispatches an action of typecountResetwith a payload of 0 which resets the count value back to 0.
The third button dispatches an action of typecountDecreasewith a payload ofcount - 1which decreases the count value by 1.
Choosing Between useState and useReducer Hooks
Now, that you understand how to useuseStateanduseReducerhooks, it is important to know when to use the right one.
If your state does not require complex logic, then obviously usinguseReducercan be overkill.
If your state is anything butJavaScript primitives like numbers, strings, and boolean values, you should use theuseStatehook. And if the type of state is an object or an array, then you should consider usinguseReducerinstead.
As your application grows in complexity, it becomes difficult to handle state with just theuseStateanduseReducerhooks.
This is whenyou can use external libraries like Redux, Jotai, and Zustand. These libraries make it easier to handle state changes across multiple components.
Making State Management Easier With JavaScript Libraries
Libraries like React, Vue, and Svelte all have their own ways of handling state. Handling state management on your own with vanilla JavaScript is definitely something it’s possible to attempt, but it is much easier and more convenient to use a battle-tested JavaScript library.
If you’re building a complex application using React where you need to manage several components, Redux might be the best choice for you.
Manage React state with ease using Redux. Ready to get started? Here’s how.
Every squeak is your PC’s way of crying for help.
Taming data is easier than it looks.
Obsidian finally feels complete.
These plugins will make you wonder why you used Photoshop in the first place.
Don’t let aging hardware force you into buying expensive upgrades.
