CodeVetter · Repo Unpack · Data flow
preactjs/preact
Applications supply component types, props, children, and a DOM container; factories turn these into renderer-owned VNodes. Reconciliation links new nodes to previous nodes, updates component state, and applies DOM changes before committing refs and callbacks. Hook state belongs to component instances, with separate queues for pending values and effects. External stores, promises, and demo network responses enter through explicit adapters; the inspected core state path does not itself implement durable application persistence.
- createElement converts a type/props/children call into createVNode; the factory initializes tree pointers, component ownership, identity, flags, and an undefined constructor marker before invoking options.vnode.
- Automatic JSX uses a separate VNode factory with the same internal fields, negative identity counters, optional source metadata, and the shared options.vnode callback.
- render wraps application output in a Fragment root, passes previous VNodes or existing childNodes into diff, and collects ref and component callback queues for commitRoot.
- constructNewChildrenArray drops null/boolean/function children, converts primitives to text VNodes, wraps arrays in Fragments, clones reused VNodes, and assigns parent/depth/matching-index metadata.
- Child matching compares key and type; actual reorders trigger a longest-increasing-subsequence pass that marks matched nodes outside the subsequence for DOM insertion.
- diff creates class instances or BaseComponent-backed function instances, resolves context providers, assigns props/state, executes render, and recursively diffs the returned children.
- setState accumulates partial or functional updates in _nextState and schedules mounted components; the render queue deduplicates dirty components and sorts them by VNode depth.
- Hook calls index component.__hooks._list; reducer dispatch stores _nextValue after an Object.is comparison, and the before-render callback promotes pending values.
- DOM output uses ownerDocument for node creation, setProperty for property/attribute/event updates, and insert with moveBefore or insertBefore for placement.
- commitRoot applies refs before options._commit and component callbacks; hooks intercept the commit for layout effects and use after-paint queues for passive effects and deferred unmount cleanup.
- useSyncExternalStore reads a server snapshot during SSR or tracked hydration, caches the latest snapshot/getter, and subscribes to changes that force an update when Object.is detects a different value.
- People Browser fetches Random User JSON, maps login.username to the model identifier, replaces the users array, and renders observer-driven sorted links and profiles; local deletion mutates the model.