useToggle

Learn to write a useToggle hook that manages a boolean state.

useToggle

useToggle is one of the most commonly written custom hooks. It returns a boolean state and a function that flips it. Ideal for dropdowns, modals, checkboxes.

The shape: const [on, setOn] = useState(false); const toggle = () => setOn(o => !o); return [on, toggle];. Returning an array lets the calling component pick names freely.

This pattern is a limited variant of useState: it only flips between two values (true/false). Used in multiple components, it's a big convenience.

Why return an array

Custom hooks usually return arrays, because you can name array elements freely: const [visible, toggleVisible] = useToggle();. With an object, names would be fixed.

Returning fewer or more values is also easy: return [count, increment, decrement, reset];. The component picks what it needs, ignoring the rest.

This flexibility puts custom hooks in the same style as React's own hooks (useState, useReducer). Consistency makes learning easier.

Exercise Write useToggle

Complete the skeleton. Write a useToggle hook. Define on state with useState(false). The toggle function should be () => setOn(o => !o). Return the array [on, toggle]. Export the hook.

Show example solution

import { useState } from "react";

function useToggle() {
  const [on, setOn] = useState(false);
  const toggle = () => setOn((o) => !o);
  return [on, toggle];
}

export default useToggle;

Test yourself

What does useToggle return?
- Object
- Single value
- Array: [value, toggle]
- Function
Show answer

Array: [value, toggle] — useToggle returns an [value, toggle] array.

Toggle operation

The toggle function flips the value with ____.

Show answer

The toggle function flips the value with ! o.

Match the useToggle parts

useState(false)

Initial
toggle

Flips
return [on, toggle]

Array
! o

Method

Next lesson: usePrevious

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies