Update Cycle & Reconciliation

Describing the output is cheap in-memory work. The runtime then decides which parts of that description differ from the previous update and turns only those differences into host operations, so one text write reaches the document.

An error boundary is an ancestor that catches a throw raised while the runtime renders or commits its subtree, renders a fallback in that subtree's place, and leaves the rest of the application mounted and usable.

A key tells the runtime which previously rendered child each new child is. Without one it pairs children by position, so inserting, removing or reordering items leaves per-item state, focus and host nodes behind at the old slot.

A template is declarative markup with its own syntax for expressions, conditionals and loops, compiled ahead of time into render code. A render function returns the same description from ordinary code, using the host language's control flow.

So the user never sees a half-updated screen and the work is paid for once. The runtime marks what changed, lets the event's code finish, then runs one pass that covers every write.

Create builds and inserts every node and writes every property. Update mutates only what differs, plus moves and removals. Claim-existing walks markup produced elsewhere, reuses those nodes untouched, and only attaches listeners, references and instance state.

A skip pays a comparison on every update and saves the subtree's pass only when the inputs match. It wins above a large, rarely-changing subtree, and loses on cheap ones or when a caller rebuilds the inputs each update.

A boundary covers only throws raised while the runtime produces or commits output. A throw in an event handler, a timer callback or a rejected promise escapes to explicit handling and the page's global error and unhandled-rejection listeners.

Everything not recomputed from inputs: the row's own state, focus and caret, an uncontrolled field's text, scroll offset and running animations. Positional matching re-feeds each instance with the next item's data and destroys the last instance, not the removed one's.

A template's whole structure is visible before it runs, so a compiler can separate constant markup from dynamic parts, hoist the constants to be created once, record which binding reads which value, and reject an impossible binding at build time.

Two write models. A runtime that re-runs components treats each pass's state as a fixed snapshot, so a queued write cannot change the value that pass already read. A fine-grained runtime updates the cell immediately and merely schedules dependents.

Four classes cause it: a value only one side can read, a clock or random source, locale- or timezone-dependent formatting, and parser-corrected markup. Fix it by rendering the volatile part after attach, marking the subtree unmatched, or repairing the nesting.

A conditional that leaves the subtree out of the described output unmounts it: instance state, effects and host nodes are destroyed, so reopening builds a fresh form. Either hide it instead, or hold the values above the conditional.

A fragment groups siblings in the description without producing a host node, so a component can return several nodes while adding none. Returning nothing renders no output at all, yet the component instance still exists and keeps its state and effects.

Listener count stops scaling with node count, and inserts and moves cost no wiring, because the framework listens once at a root and finds handlers in its own tree. The cost is ordering and interop with hand-written listeners.

A marked design visits only the region a state write flagged, so unmarked branches cost nothing, but state owned high flags everything below it. A whole-tree check visits every component and re-evaluates every binding regardless.

The nearest ancestor declaring a handler catches it, so an inner boundary wins over an outer one. It replaces the whole subtree it wraps with its fallback, not just the failing component.

A key must come from the data, stay the same for an item across updates, be unique among its siblings, and compare cheaply. The index, a value generated while rendering, a duplicated field and an editable field each fail one.

Interpolated values are set as text, so markup characters stay literal and a value can never add an element or a handler. The raw opt-in drops that guarantee: the string is parsed as markup, so it must be trusted or sanitised.

Because the runtime decides how often it runs: it may run it again for the same state, throw the result away, or skip it. Side effects inside it therefore happen an unpredictable number of times.

The measure-and-write ran in the callback tier that fires after the host presented the frame, so the uncorrected position was painted once and the correction became a second visual state. The pre-paint tier inside the commit avoids it.

Three counts hide behind one move: descriptions produced, comparisons performed, host operations applied. Relocating a row is one or two host operations, but the pass still compares all 500 siblings and re-enters every row whose inputs were rebuilt.

A trace names the functions on the stack, which for a render are mostly runtime internals plus one component type that may be mounted in dozens of places. The component path is what locates the failure.

Clearing the boundary's caught state is not enough: the reset must change what produced the throw — re-run the failed work with fresh inputs, or remount the subtree under a new identity so no stale state survives.

The panel sits in the same tree position, so it is paired with the same instance and only its inputs refresh. Keying it by the record id makes each record a different child, discarding the old instance and its subtree.

The write only queued an update, so the host tree still holds the previous output when the next line runs. Move the read into the runtime's after-update signal, or force a synchronous flush for that one read.

Keep identity, instance state, scheduling, difference-finding and commit ordering host-independent, and push a small primitive surface — create, update, insert, remove, text — into a per-host adapter. It leaks at property vocabulary, events, measurement and the component ecosystem.

Start from what the runtime must visit per update for this app's shape, then gate only where a measurement shows a large, rarely-changing region below changing state. Stop blanket-gating and prefer moving state down.

Put a boundary where a region can fail on its own and the page is still worth using without it; leave it out where a fallback would strand the user or make a wrong page look complete.