React useToggle Hook
React useToggle hook for boolean toggle management. Handle state toggling with useState-like array pattern and memoized performance optimization using TypeScript.
Tired of writing toggle logic over and over?
Join our Discord community for help from other developers.
Ever tried to manage boolean toggles in React and ended up with useState boilerplate chaos, repetitive toggle functions, or inconsistent state patterns? You know the drill—manually writing setState(!state) everywhere, creating custom toggle handlers for each boolean, dealing with unnecessary re-renders from inline functions, missing performance optimizations. This shadcn useToggle custom hook handles all that boolean state complexity so you can focus on building interactive features instead of debugging toggle logic edge cases.
useToggle showcase
Clean toggle state management with useState-like array pattern:
This free open source React hook simplifies boolean state management with TypeScript support for modern JavaScript applications. Whether you're building feature flags, UI toggles, or interactive controls in your Next.js projects, this custom hook keeps your toggle logic clean and performant.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/use-toggle.jsonnpx shadcn@latest add https://www.shadcn.io/registry/use-toggle.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-toggle.jsonbunx shadcn@latest add https://www.shadcn.io/registry/use-toggle.jsonWhy this hook beats manual boolean state
Look, you could keep using useState with manual toggle functions. But then you hit the toggle complexity—repetitive setState(prev => !prev) patterns, inline function performance issues, inconsistent toggle implementations, missing memoization optimizations.
This React hook uses optimized toggle management under the hood, with memoized callbacks and clean array destructuring. The browser handles all the state updates, plus you get performance optimization and familiar useState patterns in one call.
Plus it handles all the edge cases—memoized toggle functions for performance, direct setValue access for custom logic, type-safe implementation with error handling, stable function references across re-renders. No more repetitive toggle boilerplate or performance bottlenecks.
This free shadcn hook manages toggle state while you focus on building features. Whether you're creating React applications, Next.js dashboards, or TypeScript components, reliable toggle management keeps your JavaScript development smooth.
Features
- useState-like pattern with familiar array destructuring for clean code
- Memoized performance using useCallback to prevent unnecessary re-renders
- Direct state control with setValue for custom logic and conditional updates
- Type-safe implementation with comprehensive TypeScript definitions and validation
- Memory efficient with stable function references across component re-renders
- Boolean validation with descriptive error messages for invalid inputs
When you'll actually use this
Real talk—this isn't for complex state management. Regular useState handles multi-value state perfectly. But when you need clean boolean toggles with performance optimization and consistent patterns, this custom hook delivers.
Perfect for:
- Feature flags - Enable/disable features with clean toggle interfaces
- UI controls - Show/hide modals, expand/collapse panels, sidebar states
- Theme switching - Dark mode toggles, layout preferences, display options
- Form interactions - Checkbox states, switch controls, boolean fields
- Settings management - User preferences, configuration toggles, option flags
- Interactive elements - Dropdown menus, accordion panels, tab visibility
API Reference
useToggle
useToggle(defaultValue?: boolean): [boolean, () => void, React.Dispatch<React.SetStateAction<boolean>>]| Parameter | Type | Default | Description |
|---|---|---|---|
defaultValue | boolean | false | Initial toggle state (validates boolean type) |
Return Array
| Index | Type | Description |
|---|---|---|
[0] | boolean | Current toggle state value |
[1] | () => void | Memoized toggle function for optimal performance |
[2] | Dispatch<SetStateAction<boolean>> | Direct state setter (identical to useState) |
Things to watch out for
Array destructuring order matters. The hook returns [value, toggle, setValue] in that specific order. Unlike object destructuring, you can't skip elements without using commas, so use const [, toggle] = useToggle() if you only need the toggle function.
Toggle function is memoized. The toggle function maintains a stable reference across re-renders thanks to useCallback. This means you can safely pass it to child components or use it in dependency arrays without causing unnecessary re-renders.
Boolean validation is strict. The hook validates that defaultValue is actually a boolean and throws an error if not. This prevents subtle bugs from passing non-boolean values but means you need explicit boolean conversion for truthy/falsy values.
setValue matches useState exactly. The third return value works identically to useState's setter, accepting both direct values and updater functions. This makes it easy to migrate from useState to useToggle.
Related hooks you will also like
useBoolean
Alternative boolean state management with helper methods
useCounter
Counter state management with similar action-based patterns
useDarkMode
Dark mode toggle using boolean state management patterns
useTernaryDarkMode
Advanced theme toggle with ternary state management
useLocalStorage
Persistent boolean state across browser sessions
useStep
Step navigation with boolean validation flags
Questions you might have
React useTimeout Hook
React useTimeout hook for setTimeout management. Handle delayed actions with automatic cleanup, dynamic control, and cancellation support using TypeScript for Next.js.
React useUnmount Hook
React useUnmount hook for component unmount cleanup. Handle memory leaks, cancel subscriptions, and clear timers automatically using TypeScript for Next.js apps.