useBoolean

useBoolean

Easily manage a boolean state with dedicated setTrue, setFalse, and toggle methods. This hook prevents the need to write redundant callback functions like () => setX(true) all over your components, keeping your JSX clean and your callbacks stable.

Usage Examples

Basic

A simple toggleable UI element.

import { useBoolean } from "react-hook-lab";

function Menu() {
  const menu = useBoolean(false);

  return (
    <div>
      <button onClick={menu.toggle}>
        {menu.value ? "Close Menu" : "Open Menu"}
      </button>
      
      {menu.value && (
        <ul>
          <li>Profile</li>
          <li>Settings</li>
        </ul>
      )}
    </div>
  );
}

Common

Using the dedicated setTrue and setFalse methods for explicit actions.

import { useBoolean } from "react-hook-lab";

function Modal() {
  const { value: isOpen, setTrue: open, setFalse: close } = useBoolean(false);
  
  return (
    <div>
      <button onClick={open}>Open Modal</button>
      
      {isOpen && (
        <div className="modal">
          <p>Important Content!</p>
          <button onClick={close}>Confirm & Close</button>
        </div>
      )}
    </div>
  );
}

Advanced

Passing stable callbacks down to highly optimized child components without triggering unnecessary re-renders.

import React, { memo } from "react";
import { useBoolean } from "react-hook-lab";

// An optimized component that checks referential equality of props
const OptimizedButton = memo(({ onClick, label }: { onClick: () => void, label: string }) => {
  console.log(`Rendering ${label}`);
  return <button onClick={onClick}>{label}</button>;
});

function Dashboard() {
  const sidebar = useBoolean(false);
  
  return (
    <div>
      {/* Since sidebar.setTrue and sidebar.setFalse are wrapped in useCallback, 
          OptimizedButton will NOT re-render when the parent renders. */}
      <OptimizedButton onClick={sidebar.setTrue} label="Show Sidebar" />
      <OptimizedButton onClick={sidebar.setFalse} label="Hide Sidebar" />
      
      {sidebar.value && <aside>Sidebar Content</aside>}
    </div>
  );
}

API Reference

Parameters

• initialValue (Optional)
  • Type: boolean
  • Default: false
  • Description: The initial boolean state.

Return Object

Returns an object of type UseBooleanReturn containing:

• value (boolean): The current boolean state.
• setValue (Dispatch<SetStateAction<boolean>>): Standard React state setter function.
• setTrue (() => void): A stable, memoized function that sets the state to true.
• setFalse (() => void): A stable, memoized function that sets the state to false.
• toggle (() => void): A stable, memoized function that toggles the current state.

Core Working

Under the hood, useBoolean is a robust wrapper around React's useState. It holds a primitive boolean value in state, and provides stable, memoized functions (using useCallback with empty dependency arrays) for common boolean operations:

• setTrue always invokes setValue(true).
• setFalse always invokes setValue(false).
• toggle invokes setValue(prev => !prev).

Because these modifier methods are guaranteed to be referentially stable across renders, you can safely pass them deeply into your component tree or down to React.memo components without triggering cascading re-renders.