Kyle Shevlin

This post was formerly called useSwitch.

I can’t tell you how many times I’ve needed some binary (boolean) state management.

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

type UseBoolHandlers = {
  /**
   * Set state to true
   */
  on: () => void;
  /**
   * Set state to false
   */
  off: () = void;
  /**
   * Toggle state
   */
  toggle: () => void;
  /**
   * Reset to `initialState`
   */
  reset: () => void;
}

function useBool(initialState = false): [boolean, Handlers] {
  const [state, setState] = React.useState(initialState)

  const handlers = React.useMemo(
    () => ({
      on: () => {
        setState(true)
      },
      off: () => {
        setState(false)
      },
      toggle: () => {
        setState(s => !s)
      },
      reset: () => {
        setState(initialState)
      },
    }),
    [initialState]
  )

  return [state, handlers]
}

Kyle Shevlin is the founder & lead software engineer of Agathist, a software development firm with a mission to build good software with good people.