❮ Previous Next ❯

Virtual DOM

  • This lesson explains the Virtual DOM in React and how it helps efficiently update the user interface by reducing direct DOM operations.

  • What is DOM?

    DOM (Document Object Model) represents the structure of a web page.

    Example:

    HTML → DOM Tree

    Problem with Real DOM:

    • Updating DOM is slow

    • Full re-render affects performance

    What is Virtual DOM?

    The Virtual DOM is a lightweight copy of the real DOM stored in memory.

    React uses Virtual DOM to improve performance.

    How React Updates the UI Efficiently

    Steps:

    1. UI change occurs

    2. React updates Virtual DOM

    3. React compares old and new Virtual DOM

    4. Finds the difference (diffing)

    5. Updates only the changed part in Real DOM

    This process is called Reconciliation.

❮ Previous Next ❯