Hook composition

Learn to compose hooks.

What is hook composition?

Hook composition is combining multiple hooks inside a single custom hook. This way complex logic hides behind one call; components stay simple. Custom hooks can call other hooks, so this is a natural approach.

Example: a hook named useUserStatus can combine useToggle and useCounter to manage online user count and menu state at once. The component just writes const [count, toggle] = useUserStatus(); the details stay hidden. This improves reusability in large apps.

A composition example

A useGameScore hook can combine useCounter and usePrevious. While the score grows the old score is shown too; the player sees the gain from the last move. The component just writes const [score, increment, prev] = useGameScore().

When you compose, make sure each sub-hook can run on its own. If hooks share state, do it through parameters and return values; avoid assigning from outside. This approach helps both testing and reusability.

Exercise Combine two hooks

Write the useScoreWithPrev custom hook. Inside call useCounter(0) and usePrevious(count). The hook returns [count, increment, prev].

Show example solution

import { useCounter, usePrevious } from "./hooks";

function useScoreWithPrev() {
  const [count, increment] = useCounter(0);
  const prev = usePrevious(count);
  return [count, increment, prev];
}

Test yourself

Call the hook

function useFeature() {
  const [count, increment] = ____(0);
  return [count, increment];
}

Show answer

function useFeature() {
  const [count, increment] = useCounter(0);
  return [count, increment];
}

Match the composition scenario

useCounter

Raises the score
usePrevious

Gives old score
useToggle

Opens the menu
useGameScore

Combines all three
What does composition give you?
```
function useGameScore() {
  const [score] = useCounter(0);
  const prev = usePrevious(score);
  return [score, prev];
}
```
- Slower execution
- Less reusability
- A lot of logic in one call
- Longer components
Show answer

A lot of logic in one call — Composition gives a lot of logic in one call.

Next lesson: Summary - Custom hooks

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies