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.

function useBool(initialState = false) {
  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] as const
}

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