Presentational vs container components

The pattern splits each feature in two: a container that knows where data comes from, and a presentational component that knows only how to display what it is given.

// container — fetching, state, no markup decisions
function UserListContainer() {
  const [users, setUsers] = useState([]);
  useEffect(() => { getUsers().then(setUsers); }, []);
  return <UserList users={users} onSelect={select} />;
}

// presentational — props in, JSX out, no idea where users came from
function UserList({ users, onSelect }) {
  return <ul>{users.map(u => <li key={u.id} onClick={() => onSelect(u)}>{u.name}</li>)}</ul>;
}

What the split buys

The presentational half is trivially reusable and trivially testable — pass props, assert on output, no mocking a fetch. It is also the half a designer can work on, and the half that goes straight into Storybook. The container holds all the parts that are hard to test, in one place.

Why you hear less about it now

Dan Abramov, who popularised the pattern in 2015, later added a note to that article saying he no longer recommends it as a rule, because hooks do the same separation without splitting the component:

function UserList() {
  const { users, select } = useUsers();   // the "container" is now a hook
  return <ul>{...}</ul>;
}

A custom hook extracts the data logic, can be reused by any component, and does not add a wrapper to the tree. That covers most of what containers were for.

Where the idea still applies

The underlying principle — separate what data from how it looks — is alive; only the mechanism changed. You still want it explicitly when:

• A component must be shared across apps or published in a design system, so it cannot import your data layer.
• You are building against Storybook or visual regression tests.
• You are in React Server Components, where the split is enforced by the runtime: the server component fetches, the "use client" component renders interactively. That is this pattern, made structural.

How to answer this in an interview

Explain the split, then say that hooks and Server Components have replaced the mechanical version of it while keeping the goal. Naming that the original author walked it back shows you know the pattern's history, not just its diagram.