Skip to main content

Diffing ↔ React HeuristicAlgorithm to reconcile change in state vs view & handle update to DOM

aka Diff

internal state = VDOM

view = DOM API

VDOM Diffing Flow

both DOM API & VDOM are maintained in memory

heuristic diffing to calculate which parts of DOM require changes

Source: Reconciliation – React

renderer handles

React-DOM renderer

Dirty-Checking​

💪 brute-force approach to detect DOM API changes by check EVERY node at regular intervals

image

React diff 2 assumptions:

Reconciliation​

(process) (before Commit Phase) to compare Fiber stored in previous update vs new render

References​

  1. key ↔ special prop as string UID for VDOM to track/Diff list elements