presentational-container-pattern

The Container/Presentational pattern splits a feature into two parts: container components that fetch data and manage state, and presentational components that only render data received through props. This enforces separation of concerns between application logic and the view.

Move data fetching and state into a container component or a custom Hook, and keep the rendering in a pure presentational component that receives data via props. The presentational component should not modify the data it receives.

Custom Hooks are generally preferred in modern React because they achieve the same separation of logic and view without an extra wrapper component. The Container/Presentational pattern is still valid but can be overkill when a Hook like useDogImages encapsulates the data logic.

Avoid it for small components where splitting into two files adds overhead without benefit, for one-off views with no reuse potential, and when a custom Hook already encapsulates the data logic, making a separate container redundant.

Presentational components are usually pure functions that render based solely on the props they receive. Tests can assert the rendered output for given props without mocking data stores, APIs, or application state.