Can you explain the concept of virtual DOM in React and how it helps optimize component rendering?

Virtual DOM is a lightweight copy of the real DOM stored in memory. React uses the virtual DOM to optimize interface updates.

When the component's state changes, React first updates the virtual DOM, then compares the new version with the previous one (this process is called "diffing"). After that, React calculates the minimal set of changes needed to update the real DOM and applies only those.

This significantly reduces the number of operations on the real DOM, which are costly in terms of performance, and speeds up component rendering.

Example:

const [count, setCount] = React.useState(0);

function increment() {
  setCount(count + 1);
}

return <button onClick={increment}>Clicked {count} times</button>;

Each time you click, React updates the virtual DOM, compares it with the previous state, and only changes the text inside the button in the real DOM, without re-rendering the entire element.