What does “React is declarative” actually mean?

We often hear that with React you write declarative code. Sounds great, but what does that actually mean?

The chef and the customer

Imperative code is being the chef in the kitchen, following the recipe step by step. Chop the onions, heat the oil, add the spices, stir for five minutes.

Declarative code is being the customer at the restaurant, simply ordering what you want. “I'd like a spicy margherita pizza.” The kitchen, React, handles the rest.

Imperative, in vanilla JavaScript

const button = document.createElement("button");
button.innerText = "Click me";
button.addEventListener("click", () => {
  button.innerText = "Clicked!";
});
document.body.appendChild(button);

Declarative, in React

function Button() {
  const [text, setText] = React.useState("Click me");
  return <button onClick={() => setText("Clicked!")}>{text}</button>;
}

With React you just declare what the UI should look like for a given state, here the text, and React updates the DOM for you. No selecting elements by hand, no wiring up the change yourself, no keeping the DOM in sync with your data.

Why it matters

Declarative code is easier to read, because it says what the screen should be rather than how to get there. It's easier to maintain, with less boilerplate and fewer places for bugs to hide. And it keeps you focused on what you want to achieve, not on how to achieve it.

So next time someone says “React is declarative”, you'll know exactly what they mean.

First posted on LinkedIn.