Back to all snippets
Library/React/useToggle Hook
typescriptbeginnerhooksstateutilities

How to implement useToggle Hook in Typescript

Simple boolean state toggle hook

Quick Answer

useToggle wraps useState with a memoized toggle function so you get a stable boolean and a one-call flip function — no !prev pattern needed, no accidental new function references on every render.

Code Snippet

1import { useState, useCallback } from 'react';
2
3function useToggle(initialState: boolean = false): [boolean, () => void] {
4  const [state, setState] = useState(initialState);
5  const toggle = useCallback(() => setState(state => !state), []);
6  return [state, toggle];
7}

What is useToggle Hook?

useToggle wraps a boolean useState with a memoized toggle function so you never accidentally create a new function reference on every render. It is the go-to hook for any show/hide, open/close, or on/off UI pattern.

How It Works

  1. 1useState stores the boolean value.
  2. 2useCallback wraps the toggle so its reference is stable across renders.
  3. 3The toggle always reads the latest state via the functional updater pattern.
  4. 4The hook returns [currentValue, toggleFn] matching the useState tuple API.

Common Use Cases

  • Modal visibility - Open and close dialogs
  • Accordion panels - Expand and collapse sections
  • Sidebar toggle - Show and hide navigation drawers
  • Feature flags - Enable or disable UI features at runtime

Key Benefits

  • Stable toggle reference via useCallback prevents unnecessary re-renders
  • Accepts an initial state for flexible initialization
  • Replaces repetitive !prev setState patterns
  • Extremely small and easy to understand

Common Mistakes to Avoid

  • Not using useCallback — without it, a new toggle function is created on every render, causing unnecessary child re-renders.
  • Using setState(!value) instead of the updater — the updater always reads the latest state, avoiding stale closure bugs.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more typescript examples

Frequently Asked Questions

Why use useToggle instead of useState?

useToggle gives you a stable toggle function reference via useCallback and saves writing the !prev pattern every time.

Can I set the value directly with useToggle?

The basic version only toggles. Return setState alongside toggle if you need to set a specific value.

Related Snippets

typescript
intermediate
useLocalStorage Hook
React hook for managing state synchronized with localStorage
hooksstoragestate
typescript
intermediate
useDebounce Hook
React hook to debounce any value
hooksperformanceoptimization
typescript
intermediate
useMediaQuery Hook
React hook for responsive design with CSS media queries
hooksresponsiveui

About This Typescript Code Snippet

This free typescript code snippet for usetoggle hook is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement usetoggle hook quickly and correctly.

All snippets in the Snippetly library follow typescript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses typescript.

Tags: hooks, state, utilities  | Language: typescript  | Difficulty: beginner  | Category: React

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets