Dumb vs Smart components in React

Dumb Components (aka Presentational Components)

• Focus only on UI: Mostly JSX

• Stateless: Don’t handle business logic or state (except maybe local UI state)

• Receive data and callbacks via props

//Button.tsx
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

//UserCard.tsx
function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

These components are “dumb” because they don’t manage data; they just render props.

Smart Components (aka Container Components)

• Focus on how things work (logic, data fetching, state management)

• Pass data down to dumb components

• Often stateful

• Can handle API calls, events, context, etc.

//UserList.tsx
import { useState, useEffect } from "react";
import UserCard from "./UserCard"; // dumb component

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} name={user.name} age={user.age} />
      ))}
    </div>
  );
}

UserList is smart, it fetches data and manages state, but delegates UI to dumb components.

Why even use this pattern?

• Separates UI from logic, easier to maintain

• Makes components reusable

• Easier to test UI without worrying about logic

• Follows the Single Responsibility Principle

Note. Modern React with hooks sometimes blurs the line, because even “dumb” components can use hooks for local state. The idea is more about responsibility and separation of concerns than strictly whether a component has state.