What makes a function a React hook?

To answer the question, it's important to understand, why The Rules of Hooks exist. They say:

☝️ Prefix function names with the "use"

But that's just a convention, it has nothing to do with the ability to function properly.

✌️ Keep the order persistent

That's already interesting, cause it helps React to understand:

whether useState(() => 1) should return the initial or the updated value

whether a callback returned by useEffect should be called

whether a memoized or a newly calculated value should be returned by useMemo

To achieve this, React manages an internal state of all the hooks, called within a component's render. Think of this state as following:

Loading code example...

During the render, React also increments a 𝘤𝘰𝘶𝘯𝘵𝘦𝘳, which defines the position of a hook's result in the internal state. When the hook gets called, its returned value and the dependencies are saved in this state. The most primitive and representative implementation of useMemo might look like that:

Loading code example...

The counter itself is managed by the component's render function and resets each time when a render happens. During the next render React already knows how many hooks were called last time and if their count decreased or increased, it throws an error.

This breakdown reveals some hidden opportunities:

👉 A hook can be called conditionally, but only if it results in the exact order and number of hook calls during the previous render. The following code is technically valid, because the render produces two hook calls each render even though they are wrapped in conditions:

Loading code example...

👉 A function is treated as a hook by React not because it starts with “use”, but because it calls React's hooks during render, thus affecting the internal hooks order.

That's why, this is a hook:

Loading code example...

, and this is not a hook:

Loading code example...

⚠️

Both examples don't make a good pattern, and they still violate the rules of hooks.

But at the same time, they illustrate why React insists on a stable hooks order: the internals don't analyze conditions or function names, they just assume each React's hook call is in the same order. Use this knowledge to surprise your interviewer next time 🤫