intermediate

Container and presentational split

Separate data or coordination from reusable display components when it clarifies ownership.

Presentational components focus on how things look: they receive data and callbacks via props and contain little logic. Container components fetch data, hold state, and pass results down. The split clarifies testing — pure UI snapshots separately from data wiring.

Hooks and colocation blurred the strict file boundary; many teams now use feature folders with a hook plus dumb view. The idea persists: separate IO and orchestration from reusable markup.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

  • Presentational components stay prop-driven.
  • Containers own data sources and side effects.
  • Test UI without network when split cleanly.