Hack Frontend Community

Component Rendering Order and Hook Calling in React

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:

1

1. Parent component call

React calls parent component function to get its JSX.

2

2. Recursive child component render

In parent JSX React finds all nested components and calls them one by one.

3

3. Building virtual DOM

Based on all JSX expressions builds virtual component tree.

4

4. Comparison (diffing) and DOM update

React compares new tree with previous one and updates only changed parts.

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).

Important:

Violating hook calling order will lead to execution error and incorrect component work.