Building a Virtual DOM with React Fiber Architecture

This challenge will guide you through the process of understanding and implementing core concepts of React's Fiber architecture. You will create a simplified version of a virtual DOM reconciliation engine, focusing on how React efficiently updates the UI by breaking down rendering work into smaller, interruptible chunks. This is crucial for features like concurrent rendering and improved performance.

Problem Description

Your task is to build a simplified virtual DOM renderer that mimics the behavior of React Fiber. You will implement a system that can:

1. Represent UI elements: Create a way to represent UI elements (like div, span, custom components) and their properties (props) and children.
2. Reconcile changes: Compare a new virtual DOM tree with an existing one and generate a list of "work units" or "fiber nodes" that represent the necessary DOM updates.
3. Commit updates: Apply these updates to a real DOM.

Key Requirements:

• Fiber Node Structure: Define a FiberNode structure (or class) that will hold information about an element, its props, its children, its DOM element reference, and its state within the rendering process (e.g., pending work, completion status).
• Reconciliation Logic: Implement a function reconcile(oldFiber, newElement) that takes an existing fiber and a new virtual DOM element representation and returns the root fiber of the updated tree. This function should handle:
  • Element creation: When a new element has no corresponding old fiber.
  • Element deletion: When an old fiber exists but the new element is null or undefined.
  • Element updates: When an element type and key are the same, but props or children have changed.
• Work Unit Generation: The reconciliation process should generate a linked list of "work units" (fibers that need processing).
• DOM Manipulation: Implement a simplified commitWork(fiber) function that takes a fiber node and applies the necessary DOM changes (creation, deletion, update) to the actual DOM.
• Renderer Entry Point: Create a render(element, container) function that initializes the process, creating the root fiber and starting the work loop.

Expected Behavior:

• The render function should initially create the DOM based on the provided element and append it to the container.
• Subsequent calls to render with the same container but different element should efficiently update the existing DOM by only performing necessary changes.
• The reconciliation should correctly handle adding, removing, and updating elements in lists (based on a key prop if provided).

Edge Cases to Consider:

• Empty children arrays.
• null or undefined children.
• Elements with key props for efficient list updates.
• Updating element types (e.g., changing a div to a span).

Examples

Example 1: Initial Render

Input:
element = { type: 'div', props: { children: 'Hello World' } }
container = document.createElement('div')

Output:
The DOM inside 'container' will be:
<div>Hello World</div>

Explanation:
The initial render creates a new DOM element based on the provided virtual DOM element and appends it to the container.

Example 2: Updating Text

Initial State (from Example 1):
container.innerHTML = '<div>Hello World</div>'
oldElement = { type: 'div', props: { children: 'Hello World' } }

New Render Call:
render({ type: 'div', props: { children: 'Hello World Updated' } }, container)

Output:
The DOM inside 'container' will be:
<div>Hello World Updated</div>

Explanation:
The reconciliation detects that the 'div' element type is the same, but the text content (children prop) has changed. Only the text node is updated.

Example 3: Adding a Child Element

Initial State:
container.innerHTML = '<div>Hello World</div>'
oldElement = { type: 'div', props: { children: 'Hello World' } }

New Render Call:
render({
  type: 'div',
  props: {
    children: [
      'Hello World',
      { type: 'span', props: { children: '!' } }
    ]
  }
}, container)

Output:
The DOM inside 'container' will be:
<div>
  Hello World
  <span>!</span>
</div>

Explanation:
The reconciliation sees the new 'span' element. It creates a new DOM node for the span and appends it as a child to the existing div.

Example 4: Removing a Child Element

Initial State:
container.innerHTML = '<div>Hello World<span>!</span></div>'
oldElement = {
  type: 'div',
  props: {
    children: [
      'Hello World',
      { type: 'span', props: { children: '!' } }
    ]
  }
}

New Render Call:
render({ type: 'div', props: { children: 'Hello World' } }, container)

Output:
The DOM inside 'container' will be:
<div>Hello World</div>

Explanation:
The reconciliation detects that the 'span' element has been removed. It removes the corresponding DOM node.

Example 5: Updating List Items with Keys

Initial State:
container.innerHTML = '<div><p key="a">Item A</p><p key="b">Item B</p></div>'
oldElement = {
  type: 'div',
  props: {
    children: [
      { type: 'p', props: { key: 'a', children: 'Item A' } },
      { type: 'p', props: { key: 'b', children: 'Item B' } }
    ]
  }
}

New Render Call:
render({
  type: 'div',
  props: {
    children: [
      { type: 'p', props: { key: 'b', children: 'Item B Updated' } },
      { type: 'p', props: { key: 'c', children: 'Item C' } }
    ]
  }
}, container)

Output:
The DOM inside 'container' will be:
<div>
  <p>Item B Updated</p>
  <p>Item C</p>
</div>

Explanation:
The reconciliation uses the 'key' prop to identify that the element with key 'b' has been updated, and a new element with key 'c' has been added. The order in the DOM is also adjusted. The original 'p' with key 'a' is removed.

Constraints

• The virtual DOM elements will be represented as plain JavaScript objects with type and props properties. props can contain children, which can be a single element, an array of elements, or a string.
• You are not expected to implement state management, lifecycle methods, or context. Focus solely on the rendering and reconciliation logic.
• The DOM manipulation should be limited to standard DOM APIs (createElement, appendChild, removeChild, createTextNode, textContent, setAttribute).
• Assume a simplified element representation for this challenge. No complex components or hooks.
• Performance is important conceptually, but for this challenge, correctness of reconciliation is the primary goal.

Notes

• Think about how to structure your FiberNode to represent the tree and the work to be done. A doubly linked list (previous, next, return) is a common pattern in Fiber for managing the work queue and traversal.
• The reconciliation process often involves a recursive or iterative traversal of both the old and new virtual DOM structures.
• Consider a simple work loop that processes fiber nodes one by one until all work is done.
• The key prop is essential for efficient list reconciliation. Without keys, element reordering and identification become much harder.
• This challenge is an excellent opportunity to understand the underlying mechanics that make React so performant and flexible.