a.k.a. smart and dumb components.
The idea is to split the component into 2 smaller ones:
- the smart component (a Container or Manager)
- manages the state of the component
- provides data for the dumb component to render
- the dumb component (a Presentational one)
- responsible only for rendering the data
This also makes the presentational components reusable.
We can make the Presentational component even dumber with render-props.
Resources
- Dan Abramov on smart and dumb components
- according to this article hooks make splitting the components non necessary, but it's easier to split testing of the different aspects of the component