Hooks are a new addition in React that lets you use state and other React features without writing a class. This website provides easy to understand code examples to help you learn how hooks work and inspire you to take advantage of them in your next project. You may also like my React starter kit ✨️
This hook makes it easy to toggle a boolean value (true/false) in state. It also shows how useful useReducer can be, even for simple use-cases. If we were to utilize useState instead of useReducer then we'd need to create a second function for toggling the boolean value. We'd also need to wrap that second function with useCallback to unsure it has a stable identity. We don't need to worry about that with useReducer because the dispatch function it returns always has a stable identity. To make this easier to understand I've created another example with the useState method. Check it out and compare. It's perfectly fine to use that method instead as long as you understand the pitfalls to avoid.
import React, { useReducer } from "react";
// Usage
function App(){
const [isOn, toggleIsOn] = useToggle();
return (
<button onClick={toggleIsOn}>
Turn {isOn ? 'Off' : 'On'}
</button>
);
}
// Hook
function useToggle(initialValue = false){
// Returns the tuple [state, dispatch]
// Normally with useReducer you pass a value to dispatch to indicate what action to
// take on the state, but in this case there's only one action.
return useReducer((state) => !state, initialValue);
}