Shadcn.io is not affiliated with official shadcn/ui
React useToggle Hook
React useToggle hook for boolean state with toggle function. Simple on/off, memoized toggle, direct setValue. TypeScript ready.
Toggle boolean state with a single function call. useToggle returns the current value, a memoized toggle function, and a setter for direct control. Simpler than useBoolean when you only need toggle behavior. The toggle function is memoized and stable across renders—safe for dependency arrays and callbacks. Throws if initialized with non-boolean to catch type errors early. Direct setValue available when you need to set a specific value instead of toggling. Perfect for show/hide UI, expand/collapse, checkbox state, feature flags, or any binary state. SSR safe—just React useState. Works with Next.js App Router.
React useToggle Hook preview
Installation
Related Components
React useBoolean Hook
Boolean with setTrue/setFalse
React useCounter Hook
Counter with increment/decrement
React useStep Hook
Multi-step wizard navigation
React useLocalStorage Hook
Persist toggle state
React useDarkMode Hook
Dark mode toggle with persistence
React useScrollLock Hook
Toggle scroll locking
FAQ
Was this page helpful?
Sign in to leave feedback.