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.