What is the “smart vs. dumb” component pattern?

The "Smart vs. Dumb" component pattern (also called Container vs. Presentational components) is a design principle commonly used in React (and other component-based frameworks) to organize code more cleanly and maintainably.

🧠 Smart (Container) Components

Responsibilities:

• Handle logic, state management, and data fetching

• Decide what data to pass to child components

• Usually connected to external data sources (e.g., APIs, Redux store)

Characteristics:

• Often class components (though can be functional with hooks)

• Minimal or no UI

• Pass data and callbacks to dumb components

Example:

function UserContainer() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  return <UserProfile user={user} />;
}

🎨 Dumb (Presentational) Components

Responsibilities:

• Focus solely on UI rendering

• Receive props and display content

• Stateless or only manage local UI state

Characteristics:

• Reusable, simple, easy to test

• No awareness of where data comes from

Example:

function UserProfile({ user }) {
  if (!user) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}

✅ Why Use This Pattern?

• Separation of concerns: Logic and presentation are decoupled.

• Reusability: Presentational components can be reused across contexts.

• Testability: Dumb components are easier to test in isolation.

• Maintainability: Easier to refactor or scale.