Virtual DOM Concepts & Efficient UI Updates

// Even something small like:
element.style.width = "200px";
console.log(element.offsetWidth);

// Forces the browser to double-work:
// 1. Apply styles
// 2. Compute layout
// 3. Return the measurement

const vnode = {
  type: "div",
  props: { class: "box" },
  children: [
    "Hello World",
    { type: "span", props: {}, children: ["!"] }
  ]
};
console.log(vnode);

// ❌ Instead of doing 300 DOM updates:
for (let i = 0; i < 300; i++) {
  list.appendChild(document.createElement("li"));
}

// ✅ VDOM re-renders once:
setList(items => [...items, newItem]);

// The Virtual DOM figures out the minimal DOM operations 
// — often only one appendChild().

function diff(oldNode, newNode) {
  if (!oldNode) return { type: "CREATE", newNode };
  if (!newNode) return { type: "REMOVE" };
  if (oldNode.type !== newNode.type) {
    return { type: "REPLACE", newNode };
  }

  const propChanges = diffProps(oldNode.props, newNode.props);
  const childrenChanges = diffChildren(oldNode.children, newNode.children);

  return { type: "UPDATE", propChanges, childrenChanges };
}
console.log("Diff algorithm defined");

// ❌ Without Virtual DOM (manual DOM code):
document.querySelector("#count").innerText = count;
// If part of the page moves, resizes, or depends on styles, 
// layout recalculates.

// ✅ With Virtual DOM:
// <div id="count">{count}</div>

// Framework diff:
// Old: <div>5</div>
// New: <div>6</div>
// Difference: text changed → update only the text node

// Only a single DOM update is made.
console.log("VDOM updates only what changed");

// ❌ Bad
items.map(item => <li>{item.name}</li>)

// ✅ Good
items.map(item => <li key={item.id}>{item.name}</li>)

console.log("Always use unique keys in lists!");

// Example of incorrect diffing:
// Before: [A, B, C]
// After:  [B, C, D]

// ❌ Without keys, the algorithm thinks:
// A was changed to B
// B changed to C
// C changed to D

// ✅ With keys, it knows:
// A removed
// D added
// B, C unchanged

// This avoids bulky DOM modifications.
console.log("Keys enable efficient list updates");

// ❌ Slow version:
// {comments.map(c => (
//   <Comment text={c.text} />
// ))}
// Every comment re-renders on every change.

// ✅ Optimized with memo:
const Comment = React.memo(({ text }) => {
  return <div>{text}</div>;
});

// ✅ Even better — key by ID:
// {comments.map(c => (
//   <Comment key={c.id} text={c.text} />
// ))}

// This reduces unnecessary VDOM diffing and real DOM work.
console.log("Use React.memo for expensive components");

// Example: A simple component rendering a count
function Counter({ count }) {
  return {
    type: "div",
    props: { class: "counter" },
    children: [{ type: "span", children: [count] }]
  };
}

// Every time count changes, the entire function re-runs, 
// generating a fresh VDOM node tree. But this does not mean 
// it re-renders the whole DOM — the VDOM diff prevents unnecessary work.
console.log(Counter({ count: 5 }));

// Simple visualization:
console.log("[State Update]");
console.log("      ↓");
console.log("[Render Phase – Build VDOM]");
console.log("      ↓");
console.log("[Diff Phase – Compare Trees]");
console.log("      ↓");
console.log("[Commit Phase – Apply DOM Ops]");

// Fiber ensures rendering never blocks the main thread for too long.

// Consider this list:
// <ul>
//   {tasks.map(task => <li>{task.text}</li>)}
// </ul>

// Without keys, the VDOM diff assumes the list order 
// reflects the identity of items. When reordering:
// Node A becomes B
// B becomes C
// C becomes D
// The real DOM is altered more aggressively than needed.

// ✅ With keys:
// <ul>
//   {tasks.map(task => <li key={task.id}>{task.text}</li>)}
// </ul>

// Now the diffing algorithm knows each <li> is tied to 
// a unique identity. This allows:
// - mini
...

// Initial list:
// 1: "Learn JS"
// 2: "Learn React"
// 3: "Build a project"

// New list after user reorders:
// 2: "Learn React"
// 1: "Learn JS"
// 3: "Build a project"

// ✅ With keys:
// React moves nodes instead of replacing them
// input fields retain text
// CSS transitions do not restart

// ❌ Without keys, everything breaks.
console.log("Keys preserve element identity during reorders");

// The Virtual DOM is optimized for comparison — not rendering.
const vdomNode = {
  type: "button",
  props: { className: "btn" },
  children: ["Submit"]
};

// This is only a JS object. It has:
// - no layout
// - no styling
// - no rendering cost
// It's purely structural.
console.log(vdomNode);

// Let's compare two simplified trees:

// Old
// div
//  ├─ h1
//  └─ p

// New
// div
//  ├─ h1
//  ├─ img
//  └─ p

// The diff algorithm walks the trees:
// 1. div → same → continue
// 2. h1 → same → continue
// 3. img → not in old tree → mark as CREATED
// 4. p → exists → reuse node

// Patch set:
const patches = [
  { type: "CREATE", target: "img", position: 1 }
];

console.log("Patches:", patches);
// Only one DOM operation.
// Without VDOM? You would likely rebuild the entire element.

// Example:
// setState(1);
// setState(2);
// setState(3);

// ❌ Without batching → 3 renders.
// ✅ With batching → 1 render.

// React, Vue, Preact, and Solid all use update queues:
// - state changes accumulate
// - render is scheduled
// - diff happens once
// - DOM patches happen once

// This reduces layout calculations dramatically 
// and prevents performance spikes.
console.log("State updates are batched for efficiency");

// const User = React.memo(({ user }) => {
//   return <div>{user.name}</div>;
// });

// When to use memoization:
// - expensive child components
// - non-primitive props
// - list items
// - items containing media
console.log("Use React.memo to skip re-renders when props haven't changed");

// ❌ Computing large arrays inside render
// const sorted = items.sort((a, b) => a.value - b.value);

// ❌ Fetching data inside render
// const data = await fetch(...);

// ❌ Creating new functions every render
// <button onClick={() => doThing(id)}>Click</button>

// ❌ Mutating state instead of replacing it
// state.count++; // bad — VDOM cannot detect mutation

// ✅ Correct:
// setState(prev => ({ ...prev, count: prev.count + 1 }));
console.log("Avoid expensive operations inside render!");

// ❌ Inefficient:
// <div>
//   {bigList.map(item => <Card data={item} />)}
// </div>

// ✅ Efficient:
// const MemoCard = React.memo(Card);
// <div>
//   {bigList.map(item => <MemoCard key={item.id} data={item} />)}
// </div>

// ✅ Even more efficient:
// Use windowing libraries like:
// - react-window
// - react-virtualized
// - virtual-scroller
// These render only visible items — perfect for massive lists.
console.log("Use memoization + keys + virtualization for large lists");

// Suppose we update only part of the UI:
// <div>
//   <UserCard />
//   <Counter count={count} />
//   <Feed items={posts} />
// </div>

// When count changes:
// ✅ Only <Counter> re-renders
// ✅ <UserCard> stays untouched
// ✅ <Feed> stays untouched

// Because VDOM tracks component boundaries, 
// diffing becomes extremely granular.
console.log("VDOM enables surgical UI updates");