useToggle

Learn to write the useToggle custom hook.

What is useToggle?

useToggle is a custom hook that flips a boolean value. It holds a useState inside and returns a toggle function. When toggle is called, the value flips from true to false or back.

Common uses: open/close a menu, show/hide a modal, expand/collapse a detail. You start it with const [isOpen, toggle] = useToggle(false). You pass toggle to a button's onPress; each press flips the value. This pattern shortens code and keeps it consistent.

Using useToggle

When you call useToggle in a component you destructure it. You write const [isVisible, toggle] = useToggle(false); isVisible is the state, toggle is the function that flips it.

On a button press you call toggle; isVisible flips each time. If it was open it closes, if it was closed it opens. You can pass true instead of false as the initial value; it only sets the start state. useToggle collects the repeated setOpen(!open) pattern into one hook.

Exercise Write useToggle

Write the useToggle custom hook. Hold a value state with useState (initial value is the initial parameter). The toggle function sets !value. The hook returns [value, toggle].

Show example solution

import { useState } from "react";

function useToggle(initial) {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(!value);
  return [value, toggle];
}

Test yourself

Complete the toggle logic

function useToggle(initial) {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(____);
  return [value, toggle];
}

Show answer

function useToggle(initial) {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(!value);
  return [value, toggle];
}

What does useToggle return?
```
const [isOpen, toggle] = useToggle(false);
```
- Only the value
- Only the function
- Nothing
- The value and a toggle function
Show answer

The value and a toggle function — useToggle returns the value and the toggle function.
Match each piece to its role

useToggle

Boolean on/off
useState

Holds state
toggle

Flips the value
initial

Starting value

Next lesson: useCounter

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies