All Roadmaps›⚛️ React Mastery›Phase 1›Declarative vs Imperative

Declarative vs Imperative

0/3 in this phase0/36 across the roadmap

📖 Concept

The shift from Imperative to Declarative programming is perhaps the most important concept in modern UI development.

Imperative Programming (HOW): In imperative programming, you provide step-by-step instructions to the computer on how to achieve a result. You manually manage the state and the DOM.

  • Example: "Find the button with ID 'btn'. Add a click listener. When clicked, find the div with ID 'msg'. Change its text to 'Hello'. Change its background to red."

Declarative Programming (WHAT): In declarative programming, you describe what the UI should look like for any given state. You don't care how the computer gets there; you just define the mapping between state and UI.

  • Example: "If the 'clicked' state is true, show the message 'Hello' in a red div. Otherwise, show nothing."

Why Declarative wins for UIs:

  1. Predictability: The UI is a pure function of the state. If the state is X, the UI is always Y.
  2. Reduced Side Effects: You don't have to worry about the 'previous' state of the DOM when making an update.
  3. Easier Debugging: You only need to check if the state is correct; React handles the DOM updates.

💻 Code Example

codeTap to expand ⛶
1// ❌ IMPERATIVE (Vanilla JavaScript)
2// You have to handle every transition manually.
3const root = document.getElementById('root');
4const btn = document.createElement('button');
5btn.textContent = 'Toggle View';
6let isVisible = false;
7

8btn.addEventListener('click', () => {
9  isVisible = !isVisible;
10  const existingContent = document.getElementById('content');
11  
12  if (isVisible) {
13    if (!existingContent) {
14      const content = document.createElement('div');
15      content.id = 'content';
16      content.textContent = 'Now you see me!';
17      root.appendChild(content);
18    }
19  } else {
20    if (existingContent) {
21      root.removeChild(existingContent);
22    }
23  }
24});
25root.appendChild(btn);
26

27// ✅ DECLARATIVE (React)
28// You describe the final state, React handles the 'how'.
29import React, { useState } from 'react';
30

31function ToggleView() {
32  const [isVisible, setIsVisible] = useState(false);
33

34  return (
35    <div>
36      <button onClick={() => setIsVisible(!isVisible)}>
37        Toggle View
38      </button>
39      
40      {isVisible && (
41        <div id="content">Now you see me!</div>
42      )}
43    </div>
44  );
45}

🏋️ Practice Exercise

  1. Refactor a small vanilla JS 'To-Do' list into a declarative mental model.
  2. Write a function that takes an array of strings and returns a list of
  3. elements imperatively, then declaratively (using .map()).
  4. Explain to a non-technical person the difference between an imperative recipe and a declarative restaurant order.
  5. Identify parts of your current projects that are 'imperative' and brainstorm how they could be made 'declarative'.

⚠️ Common Mistakes

  • Trying to 'reach into' components to change them from the outside (imperative thinking).

  • Mixing imperative DOM logic (like jQuery) with React code.

  • Overcomplicating state because you're thinking about the 'transition' instead of the 'result'.

💼 Interview Questions

🎤 Mock Interview

Practice a live interview for Declarative vs Imperative

← PreviousHistory & EvolutionNext →The Virtual DOM & Reconciliation