Declarative UI: What vs How

You'll learn: Why React lets you describe the final UI state instead of writing step-by-step instructions to build it.

The Core Difference

In the imperative approach (like vanilla JavaScript or jQuery), you tell the browser how to update the UI step-by-step:

"Find this element, change its text, add a class, append a child node, then update that child's attributes..."

In React's declarative approach, you tell it what the UI should look like based on your data:

"When the user is logged in, show a welcome message. When they're not, show a login button."

React figures out the how for you.

A Restaurant Analogy

Imperative (How): You walk into the kitchen and tell the chef: "First, chop the onions. Then heat oil in the pan for 2 minutes. Add the onions, stir for 3 minutes. Crack two eggs..."

Declarative (What): You sit at a table and say: "I'd like an omelet." The chef handles all the steps.

React is like the chef — you describe the desired outcome, and it handles the DOM manipulation details.

Why This Matters

With declarative code, you don't manually track which parts of the page need updating. You don't write:

"If the username changed, update this span. If the count increased, change that div's content."

Instead, you declare: "This component always displays the current username and count."

When data changes, React re-evaluates your description and updates only what's necessary.

This eliminates the state-view synchronization bugs we saw earlier. You're no longer responsible for remembering to update every affected element — React does it automatically by comparing what you declared to what's currently on screen.

Key Takeaway: Declarative UI means describing what the interface should be for any given state, while React handles how to update the DOM efficiently.