Summary - Custom hooks

Combine useToggle, useCounter and usePrevious to write a hook library.

Summary - Custom hooks

In this group you learned to write custom hooks. useToggle flips a boolean, useCounter raises and lowers a number, usePrevious gives the previous value. With hook composition you combine them in one hook.

Now you will write these three hooks side by side like a library. Each lives in one file and you can import it into any component. This balance keeps the codebase simple and scalable; it is a pattern you will meet in real apps.

Exercise Write useToggle

Write the useToggle custom hook. Hold a value with useState (initial value initial). 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];
}

Exercise Write useCounter

Write the useCounter custom hook. Hold a count with useState (initial value initial). The increment function adds n (defaults to 1). The hook returns [count, increment].

Show example solution

import { useState } from "react";

function useCounter(initial) {
  const [count, setCount] = useState(initial);
  const increment = (n = 1) => setCount(count + n);
  return [count, increment];
}

Test yourself

What does usePrevious keep?
```
const prev = usePrevious(count);
```
- The next render's value
- The initial value forever
- The current render's value
- The previous render's value
Show answer

The previous render's value — usePrevious keeps the value from the previous render.
Match the hook to its role

useToggle

On/off
useCounter

Raise/lower
usePrevious

Old value
useRef

Mutable reference

Complete the hook name

function ____(initial) {
  const [count, setCount] = useState(initial);
  return [count, setCount];
}

Show answer

function useCounter(initial) {
  const [count, setCount] = useState(initial);
  return [count, setCount];
}

Next lesson: What is Context?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies