I can't tell you how many times I've needed some binary state management. I've called this useBool, useToggle, and now call it useSwitch (like a light switch).

Copy/paste this and change it to suit whatever needs you have.

function useSwitch(initialState = false) {
  const [state, setState] = React.useState(initialState)

  const handlers = React.useMemo(
    () => ({
      on: () => {
      off: () => {
      toggle: () => {
        setState(s => !s)
      reset: () => {

  return [state, handlers]

Let's talk some more about JavaScript, React, and software engineering.

I write a newsletter to share my thoughts and the projects I'm working on. I would love for you to join the conversation. You can unsubscribe at any time.

Data Structures and Algorithms Logo
Data Structures and Algorithms

Check out my courses!

Liked the post? You might like my video courses, too. Click the button to view this course or go to Courses for more information.
View on