Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// React reconciles virtual DOM changes to real DOM changes.
// Conceptual illustration — not actual React internals:

const prevVDOM = {
  type: 'ul',
  props: { className: 'list' },
  children: [
    { type: 'li', props: {}, children: ['Apple'] },
    { type: 'li', props: {}, children: ['Banana'] },
  ],
};

const nextVDOM = {
  type: 'ul',
  props: { className: 'list' },
  children: [
    { type: 'li', props: {}, children: ['Apple'] },
    { type: 'li', props: {}, children: ['Banana'] },
    { type: 'li', props: {}, children: ['Cherry'] }, // NEW
  ],
};

// React detects only one new <li> and appends it — it does NOT
// re-render the entire list.

// Real usage — React re-renders only the changed component:
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  console.log('Counter rendered'); // logs only when count changes

return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

export default Counter;