React › Design Patterns in React

What is the container and presentational component pattern in React?

Intermediate

Answer

This pattern separates a component into two parts. The container component handles data fetching and logic, while the presentational component only receives data through props and focuses purely on how things look. This makes the presentational part easy to reuse and test on its own.

function UserListContainer() {
  const { data: users, loading } = useFetch('/api/users');
  return <UserList users={users} loading={loading} />;
}

function UserList({ users, loading }) {
  if (loading) return <p>Loading</p>;
  return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

Real-world example A team separates their user page into a container that fetches data from the server and a presentational component that simply displays the list, making the presentational part reusable on a different page that gets its data differently.

Common follow-ups: Has this pattern become less common since hooks were introduced, and why?;How would you test the presentational component on its own without needing real data?

Custom Hooks;Component Composition & Children Props