← Voltar aos diagramas

React Fiber & Reconciliation

Internals do React: Fiber architecture, Virtual DOM diffing, concurrent rendering e hooks

Virtual DOM📝JSXReact.createElement()🌳VDOM TreeJS ObjectsO(n) DIFFFiber Node (unit of work)fiber = { tag: FunctionComponent | HostComponent, type: App | 'div', stateNode: DOM node | null, child, sibling, return, // tree pointers memoizedState, // hooks linked list flags: Placement | Update | Deletion}Fiber Tree — Double Bufferingcurrent (on screen)AppHeaderMainFooterworkInProgress (building)AppHeaderMain ⚡FooteralternateReconciliation (Diffing)Heurísticas O(n):1. Tipo diferente → destroy + create <div> → <span> = unmount subtree2. Mesmo tipo → update props/state <div className="a"> → className="b"3. Keys para listas → reorder sem remountKEYS MATTERRender Phase (interruptível)⬇️beginWorkTop-down⬆️completeWorkBottom-up📋Effect ListLinked listPAUSABLECommit Phase (síncrono)Before MutationgetSnapshotBeforeMutationDOM writesLayoutuseLayoutEffectSYNC — NO INTERRUPTLanes & Priority (Scheduler)SyncLane → click, input (immediate)DefaultLane → setState (normal)TransitionLane → startTransition (defer)IdleLane → offscreen, low priority~5ms YIELD TARGETHooks Internalsfiber.memoizedState → hooks linked listuseState → {queue, memoizedState}useEffect → {tag, create, destroy, deps}useMemo → {value, deps} (cached)LINKED LISTAutomatic Batching (React 18+)React 17: batch apenas em event handlersReact 18: batch em TUDO: ✓ Promises, setTimeout, fetch ✓ Native event listenersFEWER RE-RENDERSConcurrent Features (React 18+)⏳useTransitionDefer updates⏱️useDeferredValueDebounce render⏸️SuspenseLoading boundary🌊Streaming SSRrenderToPipeableStream🖥️RSCServer Components

Virtual DOM: representação em memória do UI como árvore de objetos JavaScript. Diff otimizado O(n)

0/10