Summary - React internals

Build a fiber node by hand and explain the diff logic with an example.

Summary - React internals

In this group you learned the reconciler, the fiber tree and the commit phase.

The reconciler compares two trees via diffing; fiber nodes are traversed like a linked list and rendering can be paused; the commit phase writes to the DOM synchronously.

Now you will write a diff function.

Exercise Write the diffNodes function

Write a diffNodes function. Take oldNode and newNode parameters. If !oldNode return { action: 'add', node: newNode }. If !newNode return { action: 'remove' }. If oldNode.type !== newNode.type return { action: 'replace', node: newNode }. Finally return { action: 'update', node: newNode }. Export it.

Show example solution

function diffNodes(oldNode, newNode) {
  if (!oldNode) return { action: 'add', node: newNode };
  if (!newNode) return { action: 'remove' };
  if (oldNode.type !== newNode.type) return { action: 'replace', node: newNode };
  return { action: 'update', node: newNode };
}
export default diffNodes;

Test yourself

Which is wrong?
- Commit can be interrupted
- Fibers are traversed via child and sibling
- key does list matching
- The reconciler does diffing
Show answer

Commit can be interrupted — Commit is synchronous and atomic; it cannot be interrupted.

Fill in the blank: move to the sibling fiber

if (fiber.child) commitWork(fiber.child);
if (fiber.____) commitWork(fiber.sibling);

Show answer

if (fiber.child) commitWork(fiber.child);
if (fiber.sibling) commitWork(fiber.sibling);

Match concepts

reconciler

Compares two trees
fiber

Internal data structure
commit

Writes to DOM
diffing

Finds differences

Next lesson: What is a custom renderer?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies