React useBoolean Hook
React useBoolean hook with true/false/toggle helpers. Clean boolean state management with TypeScript support for Next.js and React applications.
Toggle Logic Getting Messy?
Join our Discord community for help from other developers.
Ever find yourself writing const [isOpen, setIsOpen] = useState(false) and then creating separate openModal = () => setIsOpen(true) functions? Yeah, that boilerplate gets old fast. This free open source React useBoolean custom hook handles all that repetitive state management so you can focus on building features instead of writing the same three helper functions for every boolean state in your React applications.
useBoolean showcase
Clean boolean state management with convenient helper methods:
This free open source React hook simplifies boolean operations with TypeScript support for modern JavaScript applications. Whether you're building modal dialogs, feature toggles, or loading states in your Next.js projects, these memoized helpers keep your React components clean and performant.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/use-boolean.jsonnpx shadcn@latest add https://www.shadcn.io/registry/use-boolean.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-boolean.jsonbunx shadcn@latest add https://www.shadcn.io/registry/use-boolean.jsonWhy most boolean state management sucks
Look, you could keep writing useState(false) and then manually creating openModal = () => setIsOpen(true) functions in every React component. But after the 50th time, you'll appreciate having this stuff handled for you.
Most developers create inline arrow functions like onClick={() => setIsOpen(true)} which cause unnecessary re-renders when passed to child components. Or they forget to memoize their helper functions and wonder why their React applications feel sluggish.
The memoized callbacks in this React hook prevent unnecessary re-renders when you pass these functions down to child components—something that bites people when they use inline arrow functions in Next.js projects.
Plus it's just cleaner. Instead of three lines of boilerplate, you get one custom hook call with descriptive method names.
This free open source React hook handles the repetitive parts while you focus on building features. Whether you're creating React applications, Next.js projects, or TypeScript codebases, these helpers keep your JavaScript development productive.
Features
- Boolean state management with useState under the hood and validation in React applications
- Convenient helpers including setTrue, setFalse, and toggle methods for TypeScript components
- Memoized callbacks using useCallback for optimal performance in Next.js projects
- Type safety with comprehensive TypeScript definitions and error handling
- Default value support with boolean validation and error throwing
- Memory efficient with proper callback memoization to prevent unnecessary re-renders
- Component integration works seamlessly with shadcn/ui components and React frameworks
- Free open source designed for modern JavaScript development workflows
When you'll actually use this
Real talk—this isn't for every boolean. For simple flags that only the parent component cares about, stick with useState. But when you're passing these functions down to children or need the helper methods, this React hook keeps things cleaner.
Perfect for:
- Modal dialogs - Show/hide modal states with convenient open/close methods
- Toggle switches - Dark mode, settings, and feature toggles built with Next.js
- Loading states - Start/stop loading indicators using TypeScript patterns
- Visibility controls - Show/hide components with clean boolean management
- Form validation - Track validation states and error conditions
- UI interactions - Hover states, dropdown menus, and accordion panels
Common gotchas
Don't overuse this React hook: For simple flags that only the parent component uses, useState is fine in React applications. The value comes when you're passing functions to children or need multiple helper methods in Next.js projects.
Memoization only helps with child props: The helper functions are memoized with useCallback in TypeScript components. This means stable references across re-renders, which prevents unnecessary child component re-renders when you pass these functions as props.
Migration from useState isn't always worth it: If you're refactoring existing useState calls in JavaScript applications, only migrate if you're actually using the helper methods. Don't change working code just to use this React hook.
Error handling is strict: The hook validates that defaultValue is actually a boolean and throws a descriptive error if you pass something else in TypeScript projects. This prevents runtime bugs but might surprise developers used to loose JavaScript typing.
Each hook call is independent: Every useBoolean call manages separate state in React components. This is a feature, not a bug—perfect for managing different UI states in one component.
API Reference
useBoolean
| Parameter | Type | Default | Description |
|---|---|---|---|
defaultValue | boolean | false | Initial boolean value. Must be a valid boolean or throws error |
Return Object
| Property | Type | Description |
|---|---|---|
value | boolean | Current boolean state value |
setValue | React.Dispatch<React.SetStateAction<boolean>> | Direct state setter (same as useState) |
setTrue | () => void | Memoized function to set state to true |
setFalse | () => void | Memoized function to set state to false |
toggle | () => void | Memoized function to toggle the current state |
Related hooks you will also like
useToggle
Advanced toggle state management with custom values and callbacks
useCounter
Counter state management with increment, decrement, and reset helpers
useDarkMode
Dark mode state management with system preference detection
useLocalStorage
localStorage state management with automatic JSON serialization
useStep
Step-by-step state management for wizards and multi-step forms
useMap
Map state management with convenient helper methods for CRUD operations
Questions you might have
What are Shadcn React Hooks?
React hooks you own and control. Copy battle-tested implementations with TypeScript support for Next.js apps. No hook libraries, just clean custom hooks.
React useClickAnyWhere Hook
React useClickAnyWhere hook for global click detection. Track document clicks with TypeScript support for Next.js and React applications.