UI Framework Concepts

A value an ancestor publishes to its whole subtree so any descendant can read it where it is used, instead of every component on the path accepting and forwarding an input it does not need.

A default content slot is a placeholder where a component renders whatever content its caller passed between its tags. The caller writes and owns that content; the component only chooses where, and whether, it appears.

A host-node reference is a container the framework fills with the real node it created for a rendered element, so code can focus, scroll or measure it. It is empty while output is described and filled once that output is committed.

Declared inputs are the named values a parent passes into a child to parameterize it. The parent owns each one and re-supplies it every render, so the child only reads: a write there never reaches the owner.

A definition is the reusable recipe: a function, a class or a compiled template. An instance is one live copy created where that definition is used, owning its own state. The output is the description the instance produces each update.

Deriving means recomputing the value from current state on each render and storing nothing. It is the default because a recomputed value cannot disagree with its inputs; a cache is an optimisation for where it measurably pays.

An effect is code a component framework runs after a state change so something outside the component agrees with the new state - a timer, a listener, the document title. Its cleanup runs before each re-run and once at teardown.

Reference comparison asks only whether the new value is the same object as the old one. Writing into a field changes contents but not identity, so the comparison answers "same" and dependent work is skipped. A fresh copy makes it visible.

The lowest common ancestor of both siblings should own it: that component holds the value, passes the current value down as an input to each sibling, and passes down a function each sibling calls to request a change.

Nothing announces a bare assignment. Either the write goes through code the runtime owns - a setter, a tracked handle, or an assignment a compiler rewrote - or the runtime re-checks values later at a moment it was told about.

Commit is the apply step. It writes the already-computed changes into the host tree — creating, updating, moving and removing nodes, then wiring references and listeners — as one pass, so nobody ever sees a half-applied screen.

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.

A route guard is a check the router runs before committing a navigation. It can let the navigation proceed, redirect it elsewhere such as a sign-in screen, or cancel it and leave the current screen up.

The table stores a function that fetches that route's code on demand rather than a component the start-up bundle already contains. The router calls it on the first navigation that matches, waits, then renders what it resolves to.

Render a link whenever the destination is known before the click: keyboard activation, open-in-new-tab, copy-address and a working fallback come free. Navigate in code only when code, not the user, picks the destination after an event.

An outlet is a marked position a parent route's component renders, and the router mounts whichever child route matched the deeper part of the URL into that position. The parent draws the shared chrome around it.

The URL should carry state a user could reasonably share, bookmark or reach again with the Back button: the view, the selected entity, filters, sort and page. Transient interface state, secrets and large payloads stay in memory.

Besides the data, a remote-data component needs branches for idle, loading, failure, and a successful response that carried nothing. Each is a different sentence to the user; collapsing them into one blank region is the usual bug.

The first render happens with no data, because the request only starts once the component exists. The user waits for that dataless frame plus a full round trip, and every nested component that fetches repeats the pattern.

A write passes through idle, pending, then success or failure, and the component renders each. Disabling the trigger while pending stops a duplicate write the server may apply twice, whose two responses can also land in either order.

Debouncing waits for a quiet gap after the last keystroke and then fires once; throttling fires at a fixed maximum rate while typing continues. A search field wants debouncing, because only the settled query matters.

Stale means the entry is still usable but no longer trusted to match the server. A reader gets the cached value immediately as data, not as loading, while the cache refetches behind it and re-renders on arrival.

A field is framework-held when the component renders its text from state and every edit writes state back, so state is the authority. Element-held means the host element keeps the text and the framework reads it only when needed.

A text binding normally listens to the per-edit input event, which fires on every accepted edit, so the model tracks the field continuously. Bound to the committed change event instead, the framework learns the value only when the field commits.

It must show a pending state: the submit control disabled or marked busy, values still on screen, nothing claimed as saved. Without it the user presses again and the same payload is written twice.

A rule can run when the form is submitted, when a field loses focus, on every value change, or on change only after a submit has failed. Later timing feels calmer; earlier timing corrects sooner but interrupts typing.

State is the authority for the field's text, but nothing writes the edit back into it, so the next render restores the old value. Either write state on input, or stop rendering the value from state.

A fake clock turns waiting into an explicit step: the test moves time forward itself, so a debounce window, a poll interval, a timeout branch or a retry delay is reached instantly and identically on every run.

Everything the tree reads from above it: the ancestor-provided values it expects (theme, locale, session), a router, any external store it subscribes to, and a data client. The test wraps the component in those providers before mounting.

A binding is a listener the framework registered on that control for one host event, so writing the element's value property only changes the control and dispatches nothing. The listener never runs, and state keeps the old value.

Mounting attaches a component tree to a host the test owns — usually a container the test created in a simulated document — and returns a root handle. Through it the test queries rendered output, feeds new inputs into the same root, and tears the tree down.

They are two different queues with two different triggers. Advancing the clock fires timer callbacks, and those callbacks only write state; turning a write into committed output is the framework's settle step. Advance, settle, then assert - once per link.