ChatGPT brought me here when I asked for the best resources to revise React's render cycle, and it didn't disappoint, thanks.
Can I suggest a clarification?
"Every call gets added to the call stack. Then the browser clears it from top to bottom."
This seems a bit misleading, as if all the function calls shown in the snippet are first added to the call stack and only then are they all executed. But each of the DOM API calls would be added to the call stack, executed, and then popped off, before the next one would be added.
Not react-related, but it threw me for a minute.
This post is amazing! Congrats for make all this complicated things much easier to understand even for people that works long time with React.
Really enjoyed this post! You explained everything so clearly. Do you think one method works better than another in some situations?
Love the way you write about such a technical stuff. Keep up the great job!
klement Gunndu
Agentic AI Wizard
The breakdown of the render phase vs commit phase distinction is solid — one thing worth adding is that React 18's concurrent features mean the render phase can now be interrupted and restarted, which changes how you reason about side effects during rendering. The batching section is especially relevant since automatic batching in React 18 now applies inside setTimeout and promises too, not just event handlers.