Declarative vs Imperative UI

Declarative vs Imperative UI

One of the most fundamental shifts in thinking required to master React is understanding the difference between Declarative and Imperative programming. This is a very common interview question.

Imperative UI (How to do it)

Imperative programming is like giving someone step-by-step instructions. You describe the exact steps the computer must take to achieve the desired result.

In web development, vanilla JavaScript and jQuery are imperative. You have to manually grab DOM elements, check their current state, and explicitly mutate them step-by-step.

// ❌ Imperative UI (Vanilla JS)
const button = document.getElementById('like-btn');
const counter = document.getElementById('like-count');

button.addEventListener('click', () => {
  // Step 1: Read the current DOM text
  const currentCount = parseInt(counter.innerText, 10);
  
  // Step 2: Calculate the new state
  const newCount = currentCount + 1;
  
  // Step 3: Explicitly mutate the DOM
  counter.innerText = newCount;
  
  // Step 4: Manually update styling based on the new state
  if (newCount > 10) {
    button.classList.add('popular');
  }
});

As an application grows, imperative code becomes a tangled mess (often called “Spaghetti Code”). It is incredibly difficult to look at a complex UI and understand how it got into its current state because the logic is spread across dozens of disconnected manual mutations.

Declarative UI (What to do)

Declarative programming is like ordering at a restaurant. You tell the waiter what you want (a hamburger), not how to cook it.

React is declarative. You describe what the UI should look like for any given state, and React figures out the exact DOM mutations required to make it happen.

// ✅ Declarative UI (React)
function LikeButton() {
  // State is the single source of truth
  const [likes, setLikes] = useState(0);

  // We declare exactly what the UI should look like based on that state
  return (
    <button 
      onClick={() => setLikes(likes + 1)}
      className={likes > 10 ? 'popular' : ''}
    >
      Likes: {likes}
    </button>
  );
}

In the React example, we never query the DOM. We never manually update innerText. We never manually classList.add. We simply declare the relationship between the likes state and the UI, and React handles the messy imperative steps under the hood.

Why this matters in an interview

When an interviewer asks this question, they are testing your architectural mindset. They want to hear you explain that Declarative UI makes complex applications:

1. Predictable: The UI is always a pure function of the state (UI = f(state)).
2. Easier to Debug: If the UI is wrong, you know the state is wrong. You don’t have to hunt down a rogue document.getElementById call.
3. Easier to Test: You can easily pass different state objects into a component and assert what it renders.

Interview Questions

Q: Explain the difference between Declarative and Imperative UI.
A: Imperative (Vanilla JS) requires you to write step-by-step instructions on how to mutate the DOM (element.classList.add('active')). Declarative (React) allows you to simply describe what the UI should look like based on the current state (className={isActive ? 'active' : ''}), and React figures out the DOM mutations for you.