React Hooks and the Rules of Hooks – The Understanding That Finally Clicked for Me

Source: Dev.to

Today, something finally clicked for me.

I had been using React Hooks for a long time, but if I’m being honest, I didn’t truly understand what they are, why React is so strict about their rules, and why some patterns that seem to work are still considered bad practice.

This blog is my attempt to write down what I personally understood, so that:

• If I read this again after a week or two
• Or if I get confused in the future

the post brings me back to full clarity, not just surface‑level knowledge.

What React Hooks Actually Are

The first misconception that got cleared was this:

Hooks are not just normal helper functions.

Hooks are special building functions provided by React that directly interact with React’s Fiber architecture.

Hooks are used to:

• Register state with React
• Register side effects
• Connect component logic to React’s internal update system

That’s why:

• Every hook starts with use (useState, useEffect, useRef, etc.)
• React does not treat hooks like normal JavaScript functions – they are tightly coupled with how React renders and updates components.

Hooks and React Fiber – The Missing Mental Model

Internally, React maintains a Fiber Tree. For each component render, React stores hooks in a linked list:

• The first hook call becomes the first node
• The second hook call becomes the second node
• …and so on

React does not identify hooks by name; it identifies them by order. This single fact explains all the Rules of Hooks.

Overview of React Hooks

React provides many hooks, but practically speaking the most common groups are:

Most commonly used hooks

• useState
• useEffect
• useReducer
• useContext

Performance / optimization hooks

• useRef
• useCallback
• useMemo
• useTransition
• useDeferredValue

Low‑level or advanced hooks

• useSyncExternalStore
• useInsertionEffect

Different hooks have different purposes — but the same rules apply to all of them.

Rules of Hooks (The Part That Finally Made Sense)

✅ Rule 1: Only call hooks at the top level

• No hooks inside if statements
• No hooks inside loops
• No hooks after return

Hooks should never be conditionally executed.

Wrong pattern example

if (imdbRating > 8) {
  const [isTop, setIsTop] = useState(true);
}

Why this is dangerous: the hook may run on some renders and not on others, breaking the hook order and preventing React from matching state correctly.

✅ Rule 2: Only call hooks from React functions

Hooks are allowed only inside:

• Functional components
• Custom hooks

They must not be called from normal JavaScript functions because React only tracks hooks during the render phase.

“This Code Works… So Why Is It Still Wrong?”

The Derived State Trap

I used to think this was okay:

const [isTop, setIsTop] = useState(imdbRating > 8);

useEffect(() => {
  setIsTop(imdbRating > 8);
}, [imdbRating]);

The code runs without error, but conceptually it creates unnecessary state and leads to bad design.

The Correct Way of Thinking: Derive, Don’t Store

If a value can be fully derived from props or other state, do not store it as separate state.

const isTop = imdbRating > 8;

No extra state, no effect, no additional re‑render — resulting in cleaner logic and fewer bugs.

Understanding State Updates with Average Rating

When the new state depends on the previous state, use a functional update:

// Direct update
setAvgRating(Number(imdbRating));

// Functional update (depends on previous value)
setAvgRating(prev => (prev + userRating) / 2);

React supports both direct and functional updates. Functional updates avoid:

• Stale values
• Unexpected behavior due to batching

How I Now Visualize Hooks

• Hooks = nodes in a linked list
• React = the manager of that list
• Changing the order = ❌ system breaks

Therefore, hooks must be called in the same order on every render, without conditions.

Final Realization

The Rules of Hooks are:

• Not arbitrary
• Not “React being strict for no reason”

They are a direct result of React’s internal design. Once I understood Fiber and hook ordering, I didn’t need to memorize the rules—they started making logical sense.

Final Thought

If you’re struggling with React Hooks:

• Don’t just learn how to use them — learn why they exist.

When the “why” is clear:

• Code becomes cleaner
• Bugs reduce
• Confidence increases

This blog is written for future me as well — so that this confusion never comes back again.