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?…