Lesson 7 · Hooks in depth

Custom hooks

How to extract and reuse logic: useLocalStorage, useMediaQuery, useDebounce…

Before we start: a basic sauce recipe

White sauce is in the cookbook only once, but it's used in lasagne, in potato gratin and in many other dishes. The lasagne recipe doesn't describe again how to make a roux and how much milk to pour in. It just says "make a white sauce (p. 12)". That makes the recipe shorter and more readable, and when the white sauce method improves, it improves in every dish at once.

A custom hook is a basic recipe like that. When the same combination of hooks keeps repeating in your components – state, an effect, an event listener, a cleanup – you pull it out into a function named use… and the component then just writes useOnlineStatus().

Every dish has its own pot

An important detail: when you cook lasagne and potatoes at the same time, they don't share one pot of white sauce. Each dish gets its own sauce, made from the same recipe. It's the same with hooks: a hook shares the method (the logic), not the pot (the state). Two components that call the same hook each have their own, independent state.

1. Your first custom hook

We want to show in the header whether the user is online. The browser knows (navigator.onLine) and on a change it sends an online or offline event. From the lesson on effects you already know how to write it:

function StatusBar() {
  const [isOnline, setIsOnline] = useState(navigator.onLine)

  useEffect(() => {
    const goOnline = () => setIsOnline(true)
    const goOffline = () => setIsOnline(false)
    window.addEventListener('online', goOnline)
    window.addEventListener('offline', goOffline)
    return () => {
      window.removeEventListener('online', goOnline)
      window.removeEventListener('offline', goOffline)
    }
  }, [])

  return <p>{isOnline ? '🟢 Online' : '🔴 Offline'}</p>
}

Then a new requirement comes: the "Save" button should be disabled when offline. The button is a different component, so we'd have to copy the whole state with the effect. Instead, we'll pull it out into a custom hook.

Step 1: move the hooks into a function

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine)

  useEffect(() => {
    // …the same effect as above…
  }, [])

  return isOnline
}

It's an ordinary function. We just cut the contents out of the component and pasted them here.
The name must start with use. That's how React (and the linter) know there are hooks inside and the rules of hooks apply to it.
It returns what the components need – here a single boolean. It can return anything: a value, a pair like useState, an object.

Step 2: use it in components

function StatusBar() {
  const isOnline = useOnlineStatus()
  return <p>{isOnline ? '🟢 Online' : '🔴 Offline'}</p>
}

function SaveButton() {
  const isOnline = useOnlineStatus()
  return <button disabled={!isOnline}>{isOnline ? 'Save' : 'Waiting for a connection…'}</button>
}

The components now read like a sentence: "find out whether I'm online and display accordingly". How that's found out is hidden in the "recipe on p. 12".

And mind the pots: StatusBar and SaveButton each have their own useState and their own effect with its own listeners. The values match only because both listen to the same browser – not because they share state.

2. State that survives a page reload: useLocalStorage

A typical hook that connects state with "the world outside". It behaves like useState, but it also saves the value into the browser's localStorage, so it doesn't disappear after a page reload (F5).

function useLocalStorage<T>(key: string, initialValue: T) {
  // 1) Lazy initialisation: we read from storage only on the first render
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key)
    return stored !== null ? JSON.parse(stored) : initialValue
  })

  // 2) An effect: after every change, write the value into storage
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value))
  }, [key, value])

  // 3) Return the same pair as useState
  return [value, setValue] as const
}

// Usage – looks exactly like useState:
const [note, setNote] = useLocalStorage('note', '')

The first render: the function in useState looks into storage. If there's something there (from a previous visit), it uses it; otherwise the initial value.
Every change: setNote changes the state, the component re-renders and the effect writes the value into storage.
A page reload: everything in React disappears, but the storage stays. On the next first render the value is loaded back.

as const at the end tells TypeScript that we return a pair [value, setter] in a fixed order, not an array that can hold either of the two anywhere.

Demo

useLocalStorage and useToggle

What you see: A note field and a font size – both use useLocalStorage. The preview button uses a second small hook, useToggle, which returns a value and a function to flip it.

Try it:

Write a note and click A+ twice.
Reload the page (F5) and come back here. The note and the font size have stayed – the hook loaded them from storage.
Click Hide preview and reload the page. The preview is visible again – useToggle saves nothing, it's ordinary state.

The takeaway: The component uses useLocalStorage just like useState. That the value gets saved is hidden in the hook.

Loading the interactive part…

3. The rules of hooks

In the lesson on state we said state is a notebook React keeps for the cook. Now for a detail: the pages of that notebook have no names, only numbers. React doesn't remember "the name page", but "the first useState in the component, the second useState, the third…". On every render it goes through the hooks in the order they're called and opens the next page for each.

What happens when you call a hook only sometimes:

function Form({ showEmail }: { showEmail: boolean }) {
  const [name, setName] = useState('')
  if (showEmail) {
    const [email, setEmail] = useState('')   // ❌ a hook inside a condition
  }
  const [age, setAge] = useState(0)
}

Order	showEmail = true	showEmail = false
Page 1	`name`	`name`
Page 2	`email`	age – but the page holds the e-mail!
Page 3	`age`	(nobody)

When showEmail switches to false, the third hook gets the second page of the notebook – the one with the e-mail. The state "shifts" and the component works with someone else's data. That's why the order of hooks must be the same on every render.

Rule	Why
Call hooks only at the top level – not in conditions, loops or after an early return	React pairs state with hooks by the call order. A different order = a different page of the notebook.
Call them only from components and other hooks	Outside a render React doesn’t know whose notebook to open.
The name starts with `use`	That’s how the linter recognises a hook and checks the rules and dependencies.
The exception: `use()`	The use() hook (for a Promise and Context) doesn’t use a page of the notebook, so it may be inside a condition too.

4. Values from the browser: useSyncExternalStore

Our useOnlineStatus from section 1 works, but it has a weak spot: it keeps the value in a copy (its own useState) and hopes the effect manages to update it. In the short moment between the change and the effect, the component can show a stale value.

It's better to behave like a newspaper subscriber. You don't keep your own copy; you tell the publisher: "let me know when a new issue comes out" (subscribe). And whenever you need the current state, you look in the letterbox (getSnapshot). That's exactly what useSyncExternalStore does:

// The subscription: React gives you an onChange function, you register it with the browser
function subscribe(onChange: () => void) {
  window.addEventListener('resize', onChange)
  return () => window.removeEventListener('resize', onChange)   // cancelling the subscription
}

// A look in the letterbox: the current value
function getSnapshot() {
  return window.innerWidth
}

function useWindowWidth() {
  return useSyncExternalStore(subscribe, getSnapshot)
}

React calls subscribe and passes it an onChange function. You hang it on the resize event.
On every render React calls getSnapshot and gets the current width. No copy in state.
When the user resizes the window, the browser calls onChange. React looks in the letterbox, and if there's a different value, it re-renders the component.
When the component disappears, React cancels the subscription with the function subscribe returned.

The subscribe function is defined outside the component so it's always the same. If it were created anew on every render, React would cancel and set up the subscription every time. Zustand, Redux and this course's navigation are built on the same principle.

Demo

useMediaQuery, useOnlineStatus, useWindowWidth

What you see: Three hooks built on useSyncExternalStore: the window width, the system theme (through matchMedia) and the connection status.

Try it:

Resize the browser window. The number changes smoothly and around 900 px the layout switches between "desktop" and "mobile".
Switch between light and dark mode in your system (Windows: Settings → Personalisation → Colours). The theme row changes without a page reload.
Open the developer tools (F12) → the Network tab → tick Offline. The connection switches to 🔴. Don't forget to switch it back afterwards.

The takeaway: Each row is one line of code in the component. The subscription, cleanup and reading of the current value are hidden in the hook.

Loading the interactive part…

5. A general hook for loading: useAsync

A hook doesn't have to handle just one specific thing. It can be a general recipe with an "ingredient" as a parameter. A typical example: loading data with a loading / done / error state and protection against the race of responses from the lesson on effects.

function useAsync<T>(fn: () => Promise<T>, deps: unknown[]) {
  const [state, setState] = useState<AsyncState<T>>({ status: 'loading' })

  useEffect(() => {
    let ignore = false
    setState({ status: 'loading' })
    fn().then(
      (data) => !ignore && setState({ status: 'success', data }),
      (error) => !ignore && setState({ status: 'error', error }),
    )
    return () => { ignore = true }
  }, deps)

  return state
}

// The component handles only WHAT to load and how to show it:
function UserCard({ id }: { id: number }) {
  const user = useAsync(() => fetchUser(id), [id])
  if (user.status === 'loading') return <p>Loading…</p>
  if (user.status === 'error') return <p>{user.error.message}</p>
  return <p>{user.data.name}</p>
}

Demo

A general hook for loading

What you see: Two UserCard cards, both using useAsync. The left one loads a user according to the button, the right one is fixed to user #1.

Try it:

Click Next user. The left card shows "Loading…" and then a new name. The right card doesn't change – it has its own state (its own pot).
Keep clicking until you get to #5. It doesn't exist, so the left card shows an error – the error state from the hook.
Click quickly several times in a row. The card always ends up on the last selected user – the hook has protection.

The takeaway: One recipe for loading, each use with its own ingredient and its own state.

Loading the interactive part…

6. When not to make a hook

When there's no hook inside. A function that only calculates (formatPrice) is an ordinary function. Name it without use – otherwise the rules of hooks apply to it for no reason and it can't be called in a condition.
"Lifecycle" hooks like useMount(fn) or useUpdate(fn). They hide dependencies and tempt you into effects where they don't belong. Name hooks by their purpose: useChatRoom, useDebounce, useOnlineStatus.

For inspiration – these hooks come in handy in almost every project:

useDebounce(value, ms)            useInterval(fn, ms)
useLocalStorage(key, init)        usePrevious(value)
useMediaQuery(query)              useOnClickOutside(ref, fn)
useCopyToClipboard()              useIntersectionObserver(ref)
useForm(schema)                   useAuth() / usePermissions()

Check yourself

Quiz Components A and B both call useToggle(). A switches to true. What's the value in B?

true – they share statefalse – every call has its own stateundefinedIt depends on the order of the components

Quiz Why mustn't useState be inside an if?

Because it’s slowBecause React pairs hooks with state by the call order and the condition would shift the orderBecause TypeScript doesn’t allow it

Quiz The function useFormatDate(date) only calls date.toLocaleDateString() inside. Is it a correctly named hook?

YesNo – it calls no hook, it’s an ordinary function formatDate

Warm-up

Challenge

A useToggle hook

Warm-up

Write the body of a simple custom hook. The two checkboxes will then work independently of each other.

Task (the same text is in the comment at the top of the file)

CHALLENGE: A useToggle hook

The component already uses the hook twice. Only its body is missing.

1. In useToggle, create a state: const [on, setOn] = useState(initial)
2. Return an array [on, toggle], where toggle = () => setOn((v) => !v)

🧩 Where do the things not defined here come from

CSS classes like row, stack, card, list, btn, input or muted are the course's ready-made styles in src/styles.css (row = side by side, stack = stacked, card = bordered box, muted = grey text).

Loading the interactive part…

I'm done

Challenges

useDebounce is the most used hook of all: you take the logic from the challenge in the lesson on effects and turn it into a recipe. The dropdown practises two small hooks with event listeners that come in handy for every menu and modal.

How do I detect a “click outside” an element (the Dropdown challenge)?

You listen to clicks on the whole document and for each one you ask whether the click target lies inside your element. Every element has a contains method for that:

const listener = (e: PointerEvent) => {
  // e.target = the element the user clicked on
  if (ref.current && !ref.current.contains(e.target as Node)) {
    handler(e)   // the click was OUTSIDE → close the menu
  }
}
document.addEventListener('pointerdown', listener)

contains returns true for elements nested deep inside too (the menu items).
as Node is only for TypeScript: e.target could in theory be anything; we know it's an element of the page.
pointerdown instead of click because it fires right on the press (mouse, finger and pen), before a click on another button is handled.

Challenge

useDebounce

Easy

The whole hook is about 8 lines – and the component that uses it gets half as long.

Task (the same text is in the comment at the top of the file)

CHALLENGE: A useDebounce hook

The generic hook useDebounce(value, delay) returns `value`, but only after
`value` hasn't changed for `delay` ms. The signature is ready, and so is the whole UI.

1. In the hook, keep a `debounced` state (initial value = value).
2. In an effect with the dependencies [value, delay], set a setTimeout that calls
   setDebounced(value) after `delay` ms. Clear the timeout in the cleanup. The hook returns `debounced`.
3. In DebounceDemo, use the hook: debouncedQuery = useDebounce(query, delay).

Compare it with the lesson on effects: the logic is the same, but now it's reusable
and the component is much more readable.

Loading the interactive part…

I'm done

Summary

A custom hook is a basic recipe: a use… function that calls other hooks and hides repeating logic.
It shares the method, not the pot. Every call has its own state. For shared data there's Context or a store.
The rules of hooks: the pages of the notebook are numbered, so hooks never go in conditions, loops or after an early return.
useSyncExternalStore is a subscription to a value outside React – with no copy in state.
Name hooks by their purpose, not by the lifecycle. With no hooks inside, it's not a hook.

Loading lesson…

💬 Found a mistake, something unclear, or have an idea? Let me know.