What is the Container/Presentational pattern? Is it still relevant?

The pattern separates data concerns (fetching, state) from UI concerns (rendering, styling):

// ❌ Old way — explicit Container component
function UserListContainer() {
  const [users, setUsers] = useState([]);
  useEffect(() => { fetchUsers().then(setUsers); }, []);
  return ; // pass data down
}

function UserList({ users }) {
  return users.map(u => );
}

// ✅ Modern way — custom hook achieves the same separation
function useUsers() {
  return useQuery(['users'], fetchUsers);
}

// Presentational component stays the same
function UserList({ users }) {
  return users.map(u => );
}

// Consuming component — much simpler
function UsersPage() {
  const { data: users } = useUsers();
  return ;
}

Still relevant principles:

• Keep components that render UI free of data-fetching — easier to test, reuse in Storybook
• The separation now lives in custom hooks, not wrapper components