Smart vs Dumb Components

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [sortBy, setSortBy] = useState("name");

  useEffect(() => {
    setLoading(true);
    fetch("/api/users")
      .then(res => res.json())
      .then(data => setUsers(data))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  const filteredUsers = users
    .filter(u => u.name.toLowerCase().includes(searchQuery.toLowerCase()))
    .sort((a, b) => a[sortBy].localeCompare(b[sortBy]));

  const handleDelete = async (id) => {
    await fetch(`/api/users/${id}`, { method: "DELETE" });
    setUsers(prev => prev.filter(u => u.id !== id));
  };

  if (loading) return <div className="spinner" />;
  if (error) return <div className="error">{error}</div>;

  return (
    <div className="user-list-container">
      <h1>Users</h1>
      <input
        value={searchQuery}
        onChange={e => setSearchQuery(e.target.value)}
        placeholder="Search users..."
        className="search-input"
      />
      <select value={sortBy} onChange={e => setSortBy(e.target.value)}>
        <option value="name">Name</option>
        <option value="email">Email</option>
      </select>
      <ul className="user-grid">
        {filteredUsers.map(user => (
          <li key={user.id} className="user-card">
            <img src={user.avatar} alt={user.name} />
            <h3>{user.name}</h3>
            <p>{user.email}</p>
            <button onClick={() => handleDelete(user.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Problems with this component:
// ❌ 50+ lines mixing data fetching, filtering, sorting, and rendering
// ❌ Can't reuse the user card UI without the fetch logic
// ❌ Can't reuse the fetch logic without the UI
// ❌ Testing requires mocking fetch AND rendering DOM
// ❌ Changing the API response format means editing UI code
// ❌ Changing the card layout means editing data logic code

function UserListContainer() {
  // ── State Management ──────────────────────
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [sortBy, setSortBy] = useState("name");

  // ── Data Fetching ─────────────────────────
  useEffect(() => {
    setLoading(true);
    fetch("/api/users")
      .then(res => res.json())
      .then(data => setUsers(data))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  // ── Business Logic ────────────────────────
  const filteredUsers = users
    .filter(u => u.name.toLowerCase().includes(searchQuery.toLowerCase()))
    .sort((a, b) => a[sortBy].localeCompare(b[sortBy]));

  const handleDelete = async (id) => {
    await fetch(`/api/users/${id}`, { method: "DELETE" });
    setUsers(prev => prev.filter(u => u.id !== id));
  };

  // ── Render (delegates to dumb components) ─
  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error} />;

  return (
    <UserList
      users={filteredUsers}
      searchQuery={searchQuery}
      sortBy={sortBy}
      onSearchChange={setSearchQuery}
      onSortChange={setSortBy}
      onDelete={handleDelete}
    />
  );
}

// Smart component characteristics:
// ✅ Manages state (useState)
// ✅ Fetches data (useEffect + fetch)
// ✅ Contains business logic (filter, sort)
// ✅ Handles side effects (delete API call)
// ✅ Passes data + callbacks to dumb components
// ✅ Minimal JSX — just composes dumb components

Smart (Container) Component:
┌─────────────────────────────────────────┐
│                                         │
│  • Manages state (useState, useReducer) │
│  • Fetches data (useEffect, React Query)│
│  • Contains business logic              │
│  • Handles user actions / side effects  │
│  • Connects to external services        │
│  • Passes data as props to children     │
│  • Passes callbacks as props to children│
│  • Minimal or no styling                │
│  • Rarely reusable (specific to a page) │
│                                         │
│  Think of it as the "brain" or "wiring" │
│  of a feature.                          │
└─────────────────────────────────────────┘

function UserList({
  users,
  searchQuery,
  sortBy,
  onSearchChange,
  onSortChange,
  onDelete,
}) {
  return (
    <div className="user-list-container">
      <h1>Users</h1>

      <input
        value={searchQuery}
        onChange={e => onSearchChange(e.target.value)}
        placeholder="Search users..."
        className="search-input"
      />

      <select value={sortBy} onChange={e => onSortChange(e.target.value)}>
        <option value="name">Name</option>
        <option value="email">Email</option>
      </select>

      <ul className="user-grid">
        {users.map(user => (
          <UserCard key={user.id} user={user} onDelete={onDelete} />
        ))}
      </ul>
    </div>
  );
}

// Even more granular dumb component:
function UserCard({ user, onDelete }) {
  return (
    <li className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <button onClick={() => onDelete(user.id)}>Delete</button>
    </li>
  );
}

// Dumb component characteristics:
// ✅ Receives ALL data via props
// ✅ No useState for application state (local UI state like "isOpen" is OK)
// ✅ No useEffect for data fetching
// ✅ No API calls or side effects
// ✅ Calls callback props for user actions (onDelete, onSearchChange)
// ✅ Highly reusable — works with any data source
// ✅ Easy to test — pass props, assert output

Dumb (Presentational) Component:
┌─────────────────────────────────────────┐
│                                         │
│  • Receives data via props              │
│  • Renders UI (JSX + styling)           │
│  • Calls callback props on user action  │
│  • May have local UI state (isOpen,     │
│    isHovered — NOT application state)   │
│  • No data fetching                     │
│  • No business logic                    │
│  • No side effects                      │
│  • Highly reusable across the app       │
│  • Easy to test (props in → UI out)     │
│                                         │
│  Think of it as a "template" that works │
│  with any data you give it.             │
└─────────────────────────────────────────┘

Smart Component:                  Dumb Component:
┌──────────────────────┐          ┌──────────────────────┐
│  fetch("/api/users") │          │  <ul>                │
│  useState(users)     │──props──►│    {users.map(u =>   │
│  handleDelete(id)    │          │      <UserCard       │
│  filterUsers(query)  │          │        user={u}      │
│                      │◄─events──│        onDelete={..} │
│  <UserList           │          │      />              │
│    users={filtered}  │          │    )}                │
│    onDelete={handle} │          │  </ul>               │
│  />                  │          │                      │
└──────────────────────┘          └──────────────────────┘
  Knows HOW to get data            Knows HOW to display data
  Doesn't know HOW to render       Doesn't know WHERE data comes from

// ── SMART COMPONENT (the brain) ──────────────
function TodoContainer() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetch("/api/todos")
      .then(res => res.json())
      .then(setTodos);
  }, []);

  const handleToggle = (id) => {
    setTodos(prev =>
      prev.map(t => t.id === id ? { ...t, done: !t.done } : t)
    );
  };

  const handleAdd = (text) => {
    const newTodo = { id: Date.now(), text, done: false };
    setTodos(prev => [...prev, newTodo]);
  };

  // Passes everything the UI needs as props
  return (
    <TodoApp
      todos={todos}
      onToggle={handleToggle}
      onAdd={handleAdd}
    />
  );
}

// ── DUMB COMPONENT (the face) ───────────────
function TodoApp({ todos, onToggle, onAdd }) {
  const [input, setInput] = useState(""); // local UI state — OK!

  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim()) {
      onAdd(input.trim());  // delegates to smart component
      setInput("");
    }
  };

  return (
    <div className="todo-app">
      <h1>Todos</h1>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="Add a todo..."
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map(todo => (
          <TodoItem key={todo.id} todo={todo} onToggle={onToggle} />
        ))}
      </ul>
    </div>
  );
}

// ── EVEN DUMBER COMPONENT ───────────────────
function TodoItem({ todo, onToggle }) {
  return (
    <li
      className={todo.done ? "done" : ""}
      onClick={() => onToggle(todo.id)}
    >
      {todo.text}
    </li>
  );
}

// Data flow:
// TodoContainer (state, fetch, logic)
//   └─► TodoApp (layout, form UI)
//         └─► TodoItem (single item UI)
//
// Events flow back up via callbacks:
// TodoItem → onToggle → TodoApp → onToggle → TodoContainer

import { useState, useEffect } from "react";
import { UserDirectory } from "./UserDirectory";

export function UserDirectoryContainer() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [search, setSearch] = useState("");
  const [sortBy, setSortBy] = useState("name");

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(setUsers)
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  const filtered = users
    .filter(u => u.name.toLowerCase().includes(search.toLowerCase()))
    .sort((a, b) => a[sortBy].localeCompare(b[sortBy]));

  const handleDelete = async (id) => {
    await fetch(`/api/users/${id}`, { method: "DELETE" });
    setUsers(prev => prev.filter(u => u.id !== id));
  };

  return (
    <UserDirectory
      users={filtered}
      loading={loading}
      error={error}
      search={search}
      sortBy={sortBy}
      onSearchChange={setSearch}
      onSortChange={setSortBy}
      onDelete={handleDelete}
    />
  );
}

import { UserCard } from "./UserCard";

export function UserDirectory({
  users,
  loading,
  error,
  search,
  sortBy,
  onSearchChange,
  onSortChange,
  onDelete,
}) {
  if (loading) return <div className="flex justify-center p-8"><Spinner /></div>;
  if (error) return <div className="text-red-600 p-4">Error: {error}</div>;

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">User Directory</h1>

      <div className="flex gap-4 mb-6">
        <input
          value={search}
          onChange={e => onSearchChange(e.target.value)}
          placeholder="Search by name..."
          className="border rounded px-3 py-2 flex-1"
        />
        <select
          value={sortBy}
          onChange={e => onSortChange(e.target.value)}
          className="border rounded px-3 py-2"
        >
          <option value="name">Sort by Name</option>
          <option value="email">Sort by Email</option>
        </select>
      </div>

      {users.length === 0 ? (
        <p className="text-gray-500">No users found.</p>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {users.map(user => (
            <UserCard key={user.id} user={user} onDelete={onDelete} />
          ))}
        </div>
      )}
    </div>
  );
}

export function UserCard({ user, onDelete }) {
  return (
    <div className="border rounded-lg p-4 flex items-center gap-4">
      <img
        src={user.avatar}
        alt={user.name}
        className="w-12 h-12 rounded-full"
      />
      <div className="flex-1">
        <h3 className="font-semibold">{user.name}</h3>
        <p className="text-gray-500 text-sm">{user.email}</p>
      </div>
      <button
        onClick={() => onDelete(user.id)}
        className="text-red-500 hover:text-red-700 text-sm"
      >
        Delete
      </button>
    </div>
  );
}

// This component is now reusable ANYWHERE:
// • User directory page (with delete)
// • Team members list (without delete — just don't pass onDelete)
// • Search results (with different data source)
// • Storybook (with mock data, no API)
// • Unit tests (render with props, assert output)

// ── Testing a DUMB component (easy) ──────────
test("UserCard renders user name and email", () => {
  render(
    <UserCard
      user={{ id: 1, name: "Alice", email: "alice@test.com", avatar: "/a.jpg" }}
      onDelete={jest.fn()}
    />
  );

  expect(screen.getByText("Alice")).toBeInTheDocument();
  expect(screen.getByText("alice@test.com")).toBeInTheDocument();
});

test("UserCard calls onDelete with user id", () => {
  const onDelete = jest.fn();
  render(
    <UserCard
      user={{ id: 42, name: "Bob", email: "bob@test.com", avatar: "/b.jpg" }}
      onDelete={onDelete}
    />
  );

  fireEvent.click(screen.getByText("Delete"));
  expect(onDelete).toHaveBeenCalledWith(42);
});

// No mocking fetch. No waiting for async. No setup.
// Just props in → assertions out.

// ── Testing a SMART component (focused on logic) ─
test("UserDirectoryContainer filters users by search", async () => {
  // Mock the API
  jest.spyOn(global, "fetch").mockResolvedValue({
    json: () => Promise.resolve([
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
    ]),
  });

  render(<UserDirectoryContainer />);

  // Wait for data to load
  await screen.findByText("Alice");

  // Type in search
  fireEvent.change(screen.getByPlaceholderText("Search by name..."), {
    target: { value: "ali" },
  });

  expect(screen.getByText("Alice")).toBeInTheDocument();
  expect(screen.queryByText("Bob")).not.toBeInTheDocument();
});

// The "smart" layer was a wrapper component
function UserListContainer() {
  const [users, setUsers] = useState([]);
  // ... fetch logic, filters, handlers ...

  return (
    <UserList
      users={filteredUsers}
      onDelete={handleDelete}
    />
  );
}

// Two components: Container (smart) + UserList (dumb)
// Container exists ONLY to provide data to UserList

// The "smart" layer is now a custom hook
function useUsers() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");

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

  const filtered = users.filter(u =>
    u.name.toLowerCase().includes(search.toLowerCase())
  );

  const deleteUser = async (id) => {
    await fetch(`/api/users/${id}`, { method: "DELETE" });
    setUsers(prev => prev.filter(u => u.id !== id));
  };

  return { users: filtered, loading, search, setSearch, deleteUser };
}

// The component uses the hook — no separate container needed
function UserDirectory() {
  const { users, loading, search, setSearch, deleteUser } = useUsers();

  if (loading) return <Spinner />;

  return (
    <div>
      <SearchInput value={search} onChange={setSearch} />
      <UserList users={users} onDelete={deleteUser} />
    </div>
  );
}

// The separation still exists:
// useUsers()     → smart layer (data, logic, side effects)
// UserDirectory  → composition layer (which components to render)
// UserList       → dumb layer (pure UI from props)
// SearchInput    → dumb layer (pure UI from props)

❌ Over-separated: Simple toggle button

  // Container just to manage one boolean?
  function ToggleContainer() {
    const [isOn, setIsOn] = useState(false);
    return <Toggle isOn={isOn} onToggle={() => setIsOn(!isOn)} />;
  }

  function Toggle({ isOn, onToggle }) {
    return <button onClick={onToggle}>{isOn ? "ON" : "OFF"}</button>;
  }

  // This is pointless. The state IS the component.

✅ Just write it as one component:

  function Toggle() {
    const [isOn, setIsOn] = useState(false);
    return (
      <button onClick={() => setIsOn(!isOn)}>
        {isOn ? "ON" : "OFF"}
      </button>
    );
  }

Rules for when NOT to split:
  • Component is small (< 30 lines)
  • State is purely local UI state (toggle, hover, open/close)
  • Component won't be reused with different data sources
  • The "container" would just pass props through unchanged
  • You're adding a wrapper component with no real logic