Why is React considered declarative?

React Beginner Questions - Set 1

The contrast is easiest to see side by side: imperative code tells the browser each step, declarative code describes the end state.

Example

// Imperative: you own every step
function setLabelImperative(isActive) {
  const el = document.querySelector('#status');
  if (isActive) {
    el.textContent = 'Active';
    el.classList.add('on');
    el.classList.remove('off');
  } else {
    el.textContent = 'Inactive';
    el.classList.add('off');
    el.classList.remove('on');
  }
}

// Declarative: React derives the DOM from state
function Status({ isActive }) {
  return <span className={isActive ? 'on' : 'off'}>
    {isActive ? 'Active' : 'Inactive'}
  </span>;
}

What to notice

In the React version there is no intermediate state to keep consistent — the element is a pure function of `isActive`.
You describe *what* the UI is, and React decides *how* to get there.
This is also why bugs of the 'forgot to remove the old class' kind disappear.

← Back to the question list