Boolean toggle using useReducer hook in React.js
Toggles are an integral part of a web application. Toggles usually have two states. Most of the time these would be of type boolean.
So, a toggle can have a value of either true or false.
The counter-intuitive way
Now, if you have ever worked with React.js, you might have implemented a toggle using the useState hook. Here’s what a simple toggle implemented using the useState hook might look like.
const [isOpen, setIsOpen] = useState(false);
As you can tell, we defined a toggle called isOpen, the initial value of which will be false. Now, if we want to toggle the value of isOpen, we can do it by using the setIsOpen function like so.
<button onClick={() => setIsOpen(!isOpen)}>
Toggle isOpen
</button>
As you can tell, we can set the opposite boolean value of isOpen using the !isOpen every time the button is clicked, and hence it will toggle between true and false.
Putting it all together.
This works perfectly fine but if you can see, the problem here is you’ll need to pass in the value to setIsOpen every time you want to toggle the value of isOpen which is not intuitive and on top of that, it’s more error-prone.
So, to make things more concise, we can take a different approach to accomplish this. And that is using the useReducer hook.
Using the useReducer hook
The useReducer hook, as the documentation suggests, is an alternative to the useState hook and this is the perfect example to understand why is it so.
So, if we were to implement the same toggle mechanism (mentioned in the previous example) using the useReducer hook, here’s how we can do it.
First, we need to set up the useReducer hook like so.
const [isOpen, toggleIsOpen] = useReducer((state) => {
return !state;
}, false);
Let’s break it down a bit for a clear understanding.
The useReducer hook accept a “reducer” of type (state, action) => newState as the first argument and returns the current state paired with a dispatch method.
In our example,
- The current state is
isOpen - The dispatch method is
toggleIsOpen
The useReducer hook also accepts a second argument which will be the initial value of the state. So, in our example, the initial value of isOpen would be false.
The reducer’s logic is the same that we have used in the useState example. The only difference is that the logic is now decoupled and self-contained in the hook’s definition itself. And so, we don’t need to manually set the value of isOpen. The useReducer hook takes care of all of this.
So, now if we want to toggle the value of isOpen, all we need to do is call toggleIsOpen without passing any argument to it like so.
<button onClick={toggleIsOpen}>
Toggle isOpen
</button>
Putting it all together.
And that’s it! An intuitive, less boilerplate-y, and clean-looking way of managing boolean toggles like this.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
