Declarative UI
Last updated: 2026-11-02
Declarative UI Declarative UI
Declarative UI means you only describe what the interface should look like in a given state, instead of writing step-by-step DOM operations; when the state changes, React moves the screen to match. Compared with the imperative style of jQuery, the code becomes more predictable and far easier to maintain, because there is only one source of truth: the state.
| Group | Core Concepts |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
// Imperative (the old way): mutate the DOM step by step
document.getElementById('tip').textContent = 'Submitted'
// Declarative (the React way): describe the mapping from state to interface
{submitted ? <p>Submitted</p> : <p>Not submitted yet</p>}Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
A large light-bulb status label (on or off) and a button sit in the center of the screen; clicking the button swaps both instantly, and no DOM operation is ever performed by hand.💡 Key Points
💡 Tip Before writing a component, decide which states exist and what each of them looks like — the declarative code then writes itself.
ℹ️ Info For developers migrating from jQuery, the biggest shift is replacing a sequence of operations with a declaration of the result.
⚠️ Warning Avoid half declarative, half imperative code: rendering declaratively while also rewriting text through a ref leaves two conflicting sources of truth.
🏷️ More Core Concepts
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What is the difference between declarative and imperative UI?
A Imperative code describes how to do something (a sequence of DOM operations); declarative code describes what it is (which interface corresponds to which state). React only asks you to change state and handles the update process for you.
Q Why did React choose the declarative model?
A Declarative UI code is tightly bound to state, so it is predictable, easy to test and easy to collaborate on; the tricky DOM synchronization logic is handled uniformly by the framework, which shrinks the surface area where bugs hide.
Q How do you animate with a declarative UI?
A Drive CSS class names from state, or use a declarative animation library such as framer-motion, so animations are described by state instead of hand-written tweens.
