tezvyn:

React's Two-Step Update: Render and Commit

Source: react.devadvanced

React updates the screen in two phases. The "render" phase is React calling your components to calculate the UI. The "commit" phase is when it actually updates the DOM. The footgun is thinking rendering always changes the screen; it's just the prep work.

React's update process is a two-step dance: Render, then Commit. Think of it like a restaurant: a state change triggers a "render," where React calls your components to "prepare" the UI. Then, in the "commit" phase, React compares this new UI to the old one and efficiently updates the actual DOM. The key footgun is assuming rendering always updates the screen; it's just the calculation step. React won't touch the DOM if nothing has changed.

Read the original → react.dev

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.

React's Two-Step Update: Render and Commit · Tezvyn