How does React update the real DOM?

React Beginner Questions - Set 6

Two phases: render computes what should change, commit applies it. Everything you write happens in the first; only React touches the DOM in the second.

Example

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  console.log('1. render phase', count);   // may run more than once

  function handleClick() {
    setCount(c => c + 1);   // batched
    setCount(c => c + 1);   // same tick: both apply, one render
    console.log('2. handler finished, DOM not updated yet');
  }

  useEffect(() => {
    console.log('3. commit done, DOM is up to date', count);
  });

  return <button onClick={handleClick}>{count}</button>;
}

What to notice

Render must stay pure: no DOM reads/writes, no side effects — it can be called, discarded or repeated.
Updates inside one event are batched into a single commit.
`useEffect` runs after the commit, which is why measuring the DOM there is safe.

← Back to the question list