Container/Presentational Components

The plain-language idea

Split a piece of UI into two roles: a container that owns data, state, and logic, and a presentational component that only knows how to render whatever props it's handed. The presentational component doesn't fetch, doesn't know where its data came from, and doesn't call setState for anything beyond its own purely visual concerns (like "is this dropdown open"). It's a function of its props, full stop.

This pattern predates hooks — it was originally solved with two separate components, one wrapping the other. Hooks didn't kill the idea; they just removed the requirement that the "container" half be a component at all. You can now put the data-and-logic half in a custom hook and call it from wherever you need it, with no extra wrapper in the tree.

See it in a real thing: the classic split, then the hooks version

The original shape — two components, one wrapping the other:

// Presentational — pure, only cares about rendering
function UserList({ users, onSelect }) {
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id} onClick={() => onSelect(u.id)}>{u.name}</li>
      ))}
    </ul>
  );
}

// Container — owns the data and the logic
function UserListContainer() {
  const [users, setUsers] = useState([]);
  const [selectedId, setSelectedId] = useState(null);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return <UserList users={users} onSelect={setSelectedId} />;
}

Now the same split, with the container's logic moved into a custom hook instead of a wrapper component:

function useUsers() {
  const [users, setUsers] = useState([]);
  const [selectedId, setSelectedId] = useState(null);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return { users, selectedId, onSelect: setSelectedId };
}

function UserListPage() {
  const { users, onSelect } = useUsers();
  return <UserList users={users} onSelect={onSelect} />;
}

UserList didn't change at all. That's the point: the presentational half was never the part hooks made obsolete. What disappeared is the extra component in the tree whose only job was holding state and calling useEffect — useUsers does that without needing its own slot in the render tree.

What people usually miss

Watch out

• "Hooks killed this pattern" is an overstatement. Hooks killed the requirement that the logic-holding half be a separate wrapper component. The underlying separation — rendering logic that's a pure function of props, versus stateful/data logic that produces those props — is exactly as useful as it always was.
• A component that calls a data-fetching hook internally isn't strictly "presentational" anymore in the old, purist sense, but in practice this is usually fine. Treat the split as a spectrum for testability and reuse, not a rule to enforce dogmatically everywhere.
• The presentational half is the natural candidate for React.memo. Since it's meant to be a pure function of props with no internal data-fetching, its output is fully determined by what's passed in — exactly the property memoization needs to be safe and effective.

The genealogy: formalizing what "a function of props" already meant

The props lesson establishes that a component's output should be predictable from its inputs — that's what makes a component testable and reusable in the first place. The presentational half of this pattern is that same idea, deliberately enforced as a boundary: everything that would make output unpredictable (network calls, timers, external state) is pushed onto the container or the hook, leaving a component you can render with fixture data and get the exact same result every time.