How React Transforms State Changes Into Browser Pixels: A Mental Model

React operates on a core principle where the UI is treated as a function of state, meaning any state change triggers a recalculation of what the interface should look like. When developers write JSX, it is not converted directly into HTML but into plain JavaScript objects called React Elements, which serve as blueprints for the UI. React then compares a newly generated tree of these elements against the previous one before deciding which, if any, real DOM updates are needed. This reconciliation process means that a component can re-render multiple times without necessarily causing any browser DOM mutation. Understanding this distinction between rendering and DOM updates is key to writing performant React applications and diagnosing hard-to-trace bugs.