Container and presentational components

Container components fetch data, wire events, and own state; presentational components render UI from props with minimal logic. The split improves testability and reuse when the same visuals serve multiple data sources. Modern hooks often blur the line, but the responsibility separation remains valuable.

On interviews: refactor a fat component into container plus dumb views. Discuss when the split is overkill for tiny screens.

Common pitfalls: presentational components that secretly fetch data; prop drilling instead of colocated hooks; duplicating layout across containers.

The trade-off is flexibility versus complexity—know when the simpler path is enough.

Checklist:

• Presentational components are pure given props.
• Data fetching and side effects stay in containers.
• Storybook or visual tests cover presentational layer.
• Revisit split when hooks extract behavior cleanly.