useBoolean

React state hook that manages a boolean value

useBoolean wraps a boolean state and returns an object with the current value along with convenience methods: setValue, setTrue, setFalse, and toggle. This avoids the need to write inline arrow functions like () => setState(true) throughout your components. The hook accepts an optional initial value that defaults to false.

When to Use

• Controlling visibility of modals, drawers, tooltips, or other disclosure UI with explicit setTrue/setFalse semantics
• Managing feature flags or on/off states where named helpers improve readability over raw useState
• Any scenario where you want a richer API than a plain [boolean, setter] tuple

Notes

• SSR-safe: Uses only React state internally, so it works identically on server and client.
• Object return: Unlike useToggle which returns a tuple, useBoolean returns a named object, making it easier to destructure only the methods you need.
• See also useToggle for a minimal tuple-based boolean hook and useDisclosure for modal-oriented open/close patterns with callback support.

Usage

function Demo() {
  const { value, setValue, setTrue, setFalse, toggle } = useBoolean(false);

  return (
    <div>
      <p>Current value: <strong>{value ? 'True' : 'False'}</strong></p>
      <div style={{ marginBottom: 16 }}>
        <button
          type="button"
          onClick={() => setValue(true)}
          style={{ marginRight: 8 }}
          disabled={value}
        >
          Set True
        </button>
        <button
          type="button"
          onClick={() => setValue(false)}
          style={{ marginRight: 8 }}
          disabled={!value}
        >
          Set False
        </button>
        <button
          type="button"
          onClick={setTrue}
          style={{ marginRight: 8 }}
          disabled={value}
        >
          setTrue()
        </button>
        <button
          type="button"
          onClick={setFalse}
          style={{ marginRight: 8 }}
          disabled={!value}
        >
          setFalse()
        </button>
        <button
          type="button"
          onClick={toggle}
          style={{ marginRight: 8 }}
        >
          Toggle
        </button>
      </div>
      <div>
        <p>Status: {value ? '✅ Enabled' : '❌ Disabled'}</p>
      </div>
    </div>
  );
};

API

useBoolean

Returns

{ readonly value: boolean; readonly setValue: (value: boolean) => void; readonly setTrue: () => void; readonly setFalse: () => void; readonly toggle: () => void; }: An object with the following properties:

• value: The current boolean value.
• setValue: A function to set the boolean value directly.
• setTrue: A function to set the value to true.
• setFalse: A function to set the value to false.
• toggle: A function to toggle the boolean value.

Arguments