How React Handles State Changes: From setState to DOM Update

When a React state update is triggered, React does not immediately modify the browser's DOM — instead, it schedules a re-render of the affected component with the new state value. The component function runs again, producing a fresh description of what the UI should look like. React then compares this new UI description against the previous one in a process called reconciliation, or diffing, to identify exactly what has changed. Rather than rebuilding the entire DOM, React isolates only the elements that differ between the two versions. Finally, in the commit phase, React applies those minimal, targeted changes to the real browser DOM, making the update efficient and precise.