What is Virtual DOM?

Virtual DOM is a lightweight, in-memory representation of the real DOM. React uses it to figure out what changes are needed in the browser UI.

• Real DOM: The actual page elements displayed in the browser.
• Virtual DOM: A representation of those elements that React works with during rendering.

React code example
import { useState } from "react";

function App() {
const [count, setCount] = useState(0);

return (

Virtual DOM Example

Count: {count}

  <button onClick={() => setCount(count + 1)}>
    Increase
  </button>
</div>

);
}

export default App;

When you click Increase, the count changes from 0 to 1, and React updates the displayed value.

Remember these three concepts:

• Virtual DOM: Representation of the UI.
• Diffing algorithm: Compares the previous and new UI trees.
• Reconciliation: Determines how React should update the UI.