Suggest an edit

Improve this article

Refine the answer for “Why is React called a declarative library?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

React is called a **declarative library** because **in it we describe** ***what should be*** **shown to the user, rather than** ***exactly how*** **to do it**.

---

### Imperative vs declarative approach

To understand this, let's compare two approaches:

#### Imperative style (plain JavaScript)

You **tell the browser step by step** ***how*** **to update the interface**:

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

> Here you directly manage the DOM: you create elements, add listeners, update the text.

---

#### Declarative style (React)

You **describe the final state of the interface**, and React **decides on its own how to achieve it**:

```javascript
function Button() {
  const [clicked, setClicked] = useState(false);

return (
    <button onClick={() => setClicked(true)}>
      {clicked ? "Clicked!" : "Click me"}
    </button>
  );
}
```

> Here you don't touch the DOM manually.
> You simply say: "if `clicked` is true, show the text 'Clicked!'".
> React compares the old and new state itself and updates only the necessary part.

---

### Why this is convenient

- The code is easier to read and maintain
(you describe *what should be*, not *how to change the DOM*).
- Fewer errors when working with state.
- Easier to scale large interfaces.

---

### Analogy

Imperative code is like telling a robot:

> "Take the spoon, scoop up the soup, bring it to your mouth, tilt it, bring the spoon back".

Declarative code is like saying:

> "Feed me soup".

The robot (React, in our case) figures out **exactly how** to do it on its own.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts265 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.