The React Lifecycle From the Inside: When Things Actually Run

Series: How React Works Under the Hood

Part 1: Motivation Behind React Fiber: Time Slicing & Suspense

Part 2: Why React Had to Build Its Own Execution Engine

Part 3: How React Finds What Actually Changed

Part 4: The Idea That Makes Suspense Possible

Prerequisites: Read Parts 1–4 first.

A Puzzle Most React Developers Get Wrong

Quick quiz. What order do these log?

function App () { useLayoutEffect (() => { console . log ( ' layout effect ' ); });

useEffect (() => { console . log ( ' effect ' ); });

console . log ( ' render ' ); return < div />; }

Enter fullscreen mode

Exit fullscreen mode

Most people guess: render → effect → layout effect, or render → layout effect → effect.

The answer is: render → layout effect → effect.

But more importantly — why? Why does useLayoutEffect run before useEffect ? Why does useEffect run at all after the component already returned?…