presentational-container-pattern

To separate React component UI rendering from app logic, split your code into container components that manage state and data fetching, and presentational components that focus purely on displaying props.

The presentational and container pattern in React is an architectural approach where container components own data retrieval and state, while presentational components remain pure and render data received via props without mutating it.

Separating concerns improves React component testability by allowing presentational components to be tested as pure functions with straightforward input and output, completely isolated from complex data-fetching and business logic.

You should not use the container and presentational component split for very small components or when React hooks already encapsulate your application logic cleanly enough to avoid unnecessary architectural overhead.

Structure React containers to manage state and data fetching by keeping all data retrieval and business logic inside the container, then passing the fetched data down into a pure presentational component via props.