Virtual DOM vs No Virtual DOM — Complete Guide

// Svelte component:
// <script>
//   let count = 0;
//   function increment() {
//     count += 1;
//   }
// </script>
// <button on:click={increment}>
//   Clicked {count} times
// </button>

// Compiled output (simplified):
function createCounterComponent(target) {
    let count = 0;
    const button = document.createElement('button');
    const text = document.createTextNode('Clicked  times');

    button.appendChild(text);
    target.appendChild(button);

    function updateCount(newValue) {
        count = newValue;
        // Direct DOM update — no diffing
        text.textContent = 'Clicked ' + count + ' times';
    }

    button.addEventListener('click', () => {
        updateCount(count + 1);
    });

    return {
        destroy() {
            button.remove();
        }
    };
}

// When count changes:
// 1. The compiler-generated code directly updates textContent
// 2. No Virtual DOM tree is created
// 3. No diffing happens
// 4. No patch objects are generated
// 5. The DOM is updated in one operation

// Solid component:
// function Counter() {
//   const [count, setCount] = createSignal(0);
//   return <button onClick={() => setCount(c => c + 1)}>
//     Clicked {count()} times
//   </button>;
// }

// Compiled output (simplified):
function Counter() {
    const [count, setCount] = createSignal(0);
    const button = document.createElement('button');
    const text = document.createTextNode('Clicked  times');

    // Fine-grained subscription
    createEffect(() => {
        // This effect re-runs when count changes
        text.textContent = 'Clicked ' + count() + ' times';
    });

    button.appendChild(text);
    button.addEventListener('click', () => setCount(c => c + 1));

    return button;
}

// Each reactive value has its own subscribers
// Only the specific DOM nodes that depend on the changed value are updated
// No component-level re-rendering
// No Virtual DOM diffing

// Scenario 1: Simple update (single text change)
// Virtual DOM (React):
//   - Create new VNode tree
//   - Diff against old tree
//   - Determine text changed
//   - Update textContent

// No Virtual DOM (Svelte):
//   - Directly update textContent

// Winner: No Virtual DOM (no overhead)

// Scenario 2: Complex update (50% of tree changes)
// Virtual DOM (React):
//   - Create full new VNode tree
//   - Diff entire tree
//   - Generate patches for changed parts
//   - Apply patches

// No Virtual DOM (Svelte):
//   - The compiler generates updates for each binding
//   - Multiple individual DOM operations
//   - Each operation is targeted

// Winner: Depends on the specific case

// Scenario 3: Large list reordering
// Virtual DOM with keys (React):
//   - Efficient keyed reconciliation
//   - Only move DOM nodes, don't recreate

// No Virtual DOM (Svelte):
//   - Must move each DOM node individually
//   - Each move is explicit in compiled code

// Winner: Virtual DOM (better at complex structural changes)

// Memory for a component with 50 elements:

// Virtual DOM (React):
// - Two VNode trees: 50 VNodes each = 100 objects
// - Fiber nodes: 50 persistent objects
// - Patch objects during diffing: ~10-50 temporary objects
// - Total: ~200 objects

// No Virtual DOM (Svelte):
// - Generated code variables: minimal
// - Reactive subscriptions: ~10-30 objects
// - No virtual tree
// - Total: ~30 objects

// For 1000 components on a page:
// Virtual DOM: ~200,000 objects
// No Virtual DOM: ~30,000 objects
// The Virtual DOM uses 6-7x more memory

// Bundle size comparison (approximate):
// React + ReactDOM: ~40 KB gzipped
// Vue 3: ~30 KB gzipped
// Preact: ~10 KB gzipped
// Svelte (runtime): ~2 KB gzipped + compiled component code
// Solid (runtime): ~7 KB gzipped (less than 1 KB for signals)

// However, Svelte's compiled output adds code per component.
// For very small apps (1-2 components), Svelte wins.
// For very large apps (100+ components), the compiled output may be larger.

// Example: 100 components
// React: 40 KB runtime + 100 * 1 KB component code = 140 KB
// Svelte: 2 KB runtime + 100 * 3 KB compiled component = 302 KB
// At this scale, React's generic runtime is more efficient.

// Use Virtual DOM when:
// - You need React's ecosystem (React Native, Next.js, etc.)
// - Your app has many large, complex lists
// - You need concurrent features (transitions, Suspense)
// - Your team is experienced with React/Vue

// Use No Virtual DOM when:
// - You need maximum runtime performance
// - You're building interactive dashboards with frequent updates
// - Mobile-first where memory is constrained
// - You want smaller bundle sizes
// - You're building a new project with no framework constraints

// The gap is narrowing:
// - React 18's concurrent features add value beyond performance
// - Svelte 5 introduces runes for better reactivity
// - Solid combines fine-grained reactivity with JSX
// - The best choice depends on your specific requirements