Declarative UI

The UI is a deterministic function of state: UI = f(state). The developer describes the entire UI tree for any given application state, and the framework efficiently updates the DOM to match that description. This eliminates the cognitive load of manually tracking and mutating individual UI elements.

• Single Source of Truth: The UI always reflects the current state.
• No Manual DOM Manipulation: The framework handles element creation, updates, and deletion.
• Example: In React, calling setState triggers a re-render of the component tree based on the new state object.

A lightweight, in-memory representation of the real DOM used to optimize updates. When state changes, a new Virtual DOM tree is created and compared against the previous one using a diffing algorithm. The framework then computes the minimal set of batched mutations required to synchronize the real DOM.

• Batched Updates: Multiple state changes are grouped into a single render cycle.
• Efficient Diffing: Only changed nodes and attributes are updated in the real DOM.
• Cross-Platform Abstraction: The Virtual DOM enables rendering to targets beyond the browser, such as mobile (React Native) or terminals.

UIs are built by composing encapsulated, reusable components that manage their own state and rendering logic. Components are combined like Lego blocks, where parent components pass data down through props (properties) and children emit events up.

• Unidirectional Data Flow: State flows down, events flow up, making data flow predictable.
• Encapsulation: A component's internal logic and styling are isolated, preventing unintended side effects.
• Composition over Inheritance: Frameworks like React and Flutter emphasize assembling complex UIs from simple, single-responsibility components rather than deep inheritance hierarchies.

State is treated as read-only. Instead of mutating an existing state object directly, a new copy is created with the required changes. This immutability enables fast change detection because the framework can perform a simple reference check (oldState === newState) rather than a deep comparison.

• Predictability: Eliminates race conditions caused by shared mutable state.
• Time-Travel Debugging: Enables features like Redux DevTools, where every state change can be recorded, inspected, and reverted.
• Pure Components: Components become pure functions that only re-render when their inputs change, dramatically improving performance.

Event handling is described declaratively within the component's render output, binding events directly to the state that drives the UI. This contrasts with imperative approaches that attach listeners to specific DOM nodes and manually query the DOM for values.

• Synthetic Events: Frameworks like React wrap native browser events in a cross-browser compatible layer.
• Direct State Binding: An onClick handler directly updates the state model, which automatically triggers a re-render.
• Example: <button onClick={() => setCount(count + 1)}> declares the entire interaction lifecycle in a single line.

UI logic, such as showing or hiding elements and rendering lists, is expressed using standard language constructs like ternary operators and Array.map(). The framework automatically handles inserting, removing, and reordering DOM nodes when the underlying data array changes.

• Keyed Reconciliation: Unique key props help the diffing algorithm identify which items in a list have changed, been added, or removed, preventing unnecessary re-renders of stable elements.
• No Imperative Loops: Developers describe the mapping from data to UI elements, not the step-by-step process of building them.
• Example: {items.map(item => <ItemComponent key={item.id} data={item} />)}

An in-memory, lightweight representation of the real Document Object Model (DOM). Frameworks like React use a Virtual DOM to batch and optimize updates. Instead of directly manipulating the browser's expensive DOM nodes on every state change, the framework diffs the new Virtual DOM tree against the previous one, calculates the minimal set of mutations, and applies them in a single, efficient batch. This reconciliation process is the key mechanism enabling declarative UI to achieve high performance without manual DOM optimization.

A declarative paradigm centered on asynchronous data streams and the automatic propagation of change. In a reactive system, components subscribe to observable data sources. When the source updates, all dependent computations and UI elements re-evaluate automatically. Libraries like RxJS, MobX, and signals-based frameworks (e.g., SolidJS) implement this model. This eliminates manual subscription management and ensures the UI is always a consistent projection of the application's state, making it a natural complement to declarative UI architectures.

The practice of managing the single source of truth for application data in a predictable, centralized, and testable way. In declarative UI, the view is a function of state (UI = f(state)). As applications grow, prop drilling and scattered component state become unmanageable. Libraries like Redux, Zustand, and Jotai provide patterns for:

• Centralizing application state outside the component tree
• Enforcing unidirectional data flow
• Enabling time-travel debugging
• Decoupling state logic from presentation

A technique where a component's initial HTML is generated on the server rather than in the browser. For declarative frameworks, SSR resolves a critical limitation: the initial blank page while JavaScript loads and hydrates. The server executes the component code, renders it to an HTML string, and sends a fully formed page to the client. This dramatically improves First Contentful Paint (FCP) and Search Engine Optimization (SEO). Modern frameworks like Next.js and Remix make SSR a first-class feature of the declarative model.

The process where a client-side JavaScript framework attaches event handlers and component state to static HTML that was server-rendered. After the browser parses the initial HTML, the framework's runtime downloads, walks the existing DOM tree, and 'hydrates' it by associating each node with its corresponding component logic. This makes the page interactive. This is the bridge between the static, non-interactive output of SSR and a fully functional declarative UI. Partial hydration and islands architecture are advanced patterns that hydrate only interactive portions.

A suite of native browser APIs (Custom Elements, Shadow DOM, and HTML Templates) for creating reusable, encapsulated UI elements. Unlike framework-specific components, Web Components are framework-agnostic and work natively in the browser. They encapsulate markup, style, and behavior, preventing CSS and JavaScript conflicts. This standard provides a lower-level, interoperable component model that can be consumed by any declarative framework, making it a powerful primitive for design systems and cross-platform component sharing.