What is Virtual DOM in React and why is it needed?

Virtual DOM in React is an abstraction of the real DOM, which is a lightweight copy of the DOM tree in memory. React uses the Virtual DOM for efficient interface updates: when the component's state changes, a new Virtual DOM tree is created, which is then compared to the previous one (this process is called "reconciliation"). React then calculates the minimal set of changes needed to update the real DOM and applies them.

This significantly improves performance because operations on the real DOM are costly and slow, so updating only the necessary parts is faster and more efficient.

Example:

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

return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;

Each click causes React to update the Virtual DOM, compare it with the previous one, and make minimal changes to the real DOM.