React Rendering Order and Hook Execution Explained

In React it's important to understand component rendering order and hook calling, especially when optimizing performance and debugging component behavior.

Component Rendering Order

When React starts render, it follows this order:

Hook Calling Order

Hooks in React are called in strictly defined order so React can match hook values with their previous values during repeated renders.

Order

1. useState, useReducer, useContext and other synchronous hooks

   • Called immediately during component render, in order they're declared in function.
   • React saves hook values by their order in "internal list".

2. useLayoutEffect

   • Executes after DOM updated but before browser paints changes.
   • Useful if you need to measure DOM sizes or synchronously interact with layout.

3. useEffect

   • Called after browser rendered page.
   • Used for side effects, subscriptions, requests, timers etc.

❗ Important: don't violate hook order

React relies on fixed hook calling order between renders. Therefore:

Cannot call hooks inside:

• Conditions if
• Loops for, while
• Nested functions

Need to call hooks always at top level of component function.

// Bad 
if (show) {
  useEffect(() => {}, []);
}

// Good 
useEffect(() => {
  if (show) {
    // logic
  }
}, [show]);

Summary

• React first calls parent components, then renders children.
• Hooks are called in order they're written in function body.
• useState and useEffect — not just functions, but lifecycle management mechanism.
• useLayoutEffect — synchronous, useEffect — asynchronous (relative to render).