Under the Hood: How a Frontend Framework Actually Works

Welcome back to CodeWithBotina. We all know how to use useState or create components, but have you ever wondered what actually happens in the browser when you update a variable?

Manipulating the DOM (Document Object Model) directly is performance-heavy. If you tried to manually update 1,000 nodes every time a user types a letter, your app would freeze. This is where the magic of modern frameworks comes in.

1. The Key Concept: The Virtual DOM (VDOM)

Most frameworks don't touch the browser right away. Instead, they create a lightweight copy in memory called the Virtual DOM.

graph TD
    A[State Changes] --> B[Create New Virtual Tree]
    B --> C[Compare with Previous Tree - Diffing]
    C --> D[Calculate Minimum Changes]
    D --> E[Update Real DOM - Reconciliation]

What does this look like in code?

When you write JSX in React, you are actually calling a function that creates a plain object:

// What you write
const element = Hello Botina;

// What the framework understands (Simplified)
{
  type: 'h1',
  props: {
    className: 'title',
    children: 'Hello Botina'
  }
}

2. The Reactivity Cycle

The framework needs to know when something has changed. There are two main approaches in 2026:

1. Diffing (React): It compares two complete trees and looks for differences.
2. Signals/Proxies (Vue/Svelte/Qwik): They wrap your variables in "observers." When the variable changes, the framework knows exactly which tiny piece of the screen needs updating without comparing the whole tree.

3. The Rendering Process

This is where the communication between your logic and the browser engine happens:

sequenceDiagram
    participant App as Your Code
    participant FW as Framework Engine
    participant VDOM as Virtual DOM
    participant DOM as Real DOM

    App->>FW: setState({ counter: 1 })
    FW->>VDOM: Generate new node
    VDOM->>VDOM: Diffing Algorithm
    Note over VDOM: Identifies that only text changed
    FW->>DOM: document.getElementById('count').innerText = 1
    DOM-->>App: UI Updated

4. Why does this matter to you?

Understanding this helps you avoid "Over-rendering." If you know that the framework rebuilds the Virtual DOM, you will understand why you shouldn't define heavy functions inside the component body or why keys in lists are mandatory (they help the diffing algorithm stay on track).

Trusted Sources for Further Reading:

• React Docs (Preserving and Resetting State): Excellent technical deep dive. react.dev
• MDN Web Docs (Introduction to the DOM): To understand the physical foundation. developer.mozilla.org
• Official Mermaid.js page: To learn how to make your own diagrams like these. mermaid.js.org

Don't just write code, understand how it lives. See you in the next CodeWithBotina post.