presentational-container-pattern

Separating UI rendering from data fetching in React involves keeping presentational components pure and prop-based, while confining side effects and state management to container components or custom hooks.

Mixing business logic with React component rendering makes testing difficult because side effects and state mutations are tangled with UI output, preventing you from verifying rendering through simple props.

Refactor a React component by extracting data-fetching and state management into a container or custom hook, then passing data down as props to a pure presentational component that only handles rendering.

You should avoid the presentational and container pattern when your React components are small or when custom hooks already provide sufficient separation of concerns without adding extra architectural layers.

You can use custom hooks instead of container components for state management in React, achieving the same separation of concerns by isolating side effects and data-fetching logic from the presentational UI layer.