Lesson 5 of 80

Custom Hooks

Q: What is a custom hook, really — what makes it different from any other JavaScript function — and why do the rules of hooks (no conditionals, top-level only) exist?

A strong answer covers: A custom hook is a plain function that calls other hooks internally — composition, not a new mechanism; State is never shared between callers — each call creates its own independent hook state; The rules of hooks exist because React tracks each hook's state by call order, not by name, so conditional or nested calls would shift or corrupt that order between renders.

A custom hook is just a function that calls other hooks — composition, not a new mechanism, with one hard rule underneath it.

12 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 4

Two different components both call the same custom hook, useToggle(). Do they end up sharing state?

No — each call gets its own independent stateYes, because it's the same hook function, so its state is sharedOnly if both components happen to render at the same time

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Custom Hooks

What interviewers actually ask about this, and what a strong answer has to cover.

What is a custom hook, really — what makes it different from any other JavaScript function — and why do the rules of hooks (no conditionals, top-level only) exist?

A strong answer covers

A custom hook is a plain function that calls other hooks internally — composition, not a new mechanism
State is never shared between callers — each call creates its own independent hook state
The rules of hooks exist because React tracks each hook's state by call order, not by name, so conditional or nested calls would shift or corrupt that order between renders

Likely follow-ups

If two components both call the same custom hook, do they end up sharing any state? Why or why not?
What would actually break, mechanically, if you called useState() inside an if block that's true on some renders and false on others?
Is the 'use' prefix enforced by JavaScript itself, or is it a convention — and what actually depends on it?
Strip away the 'use' naming convention and React entirely — what plain vanilla-JavaScript pattern is a custom hook actually an example of?

Practice these with the AI interviewer →

The plain-language idea

A custom hook is nothing more than a JavaScript function that calls useState, useEffect, or other hooks inside it. Naming it useSomething is a convention, not magic — it's the same useState you already know, just wrapped in a function you can reuse.

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

function Sidebar() {
  const [open, toggleOpen] = useToggle(false);
  return <button onClick={toggleOpen}>{open ? "Close" : "Open"}</button>;
}

useToggle isn't a new React feature — it's a plain function that happens to call useState. Every component that calls it gets its own independent open/toggleOpen pair; the hook doesn't share state between callers, no matter how many components use it.

See it in a real thing: why the rules of hooks exist

function Broken({ isLoggedIn }) {
  if (isLoggedIn) {
    const [name, setName] = useState(""); // ❌ conditional hook call
  }
  const [age, setAge] = useState(0);
  // ...
}

React doesn't track hook state by variable name — it tracks it by the order hooks are called in, per component instance, like slots in a list: 1st hook call, 2nd hook call, 3rd… If isLoggedIn is true on one render and false on the next, the useState calls shift position, and React attaches the wrong stored value to the wrong slot. That's the entire reason for the rule: call hooks unconditionally, at the top level, in the same order every render.

Custom hooks: the same logic, written onceStep 1 of 3

Two components both need mouse-position tracking — the same useState + useEffect, duplicated.

What people usually miss

Watch out

Custom hooks don't share state between the components that call them. Two components calling useToggle() each get their own useState underneath — completely independent.
The use prefix is a convention, not a language feature. Nothing in JavaScript enforces it; it exists so linters (and other developers) can recognize a function needs to follow the rules of hooks.
A custom hook can call other custom hooks. There's no limit to composing them — useDebouncedValue might internally use useState and useEffect; something else can build on top of useDebouncedValue.
Extracting a custom hook doesn't change behavior — it changes reuse. The exact same useState/useEffect calls happen either way; you're only giving a reusable name to a pattern you'd otherwise repeat.

Why this matters in interviews

"What would break if you called useState inside an if?" tests whether you understand hooks aren't magic annotations — they're ordinary function calls React tracks positionally, which is a very different mental model from most APIs, and one that has real, mechanical consequences.