Notes on React, pt 3: Stateful Containers, Stateless Presenters

This is post #3 in an ongoing series as I learn React, and share knowledge with other devs at Kiddom. Start at the first.

Containers vs Presenters: Why?

React is really nice for it’s modularization. Redux takes that further, by centralizing state. We take this even further using a pattern of “Container” components which are aware of the state and how it changes, passing the data and callbacks to “Presenter” components which have no idea what’s going on besides what to do with what they’re given.

This separates the concerns of what state we’re in and how we change (business), from the UI concern of what gets shown where. It makes it really easy to have multiple “types” of a component. There’s one Container, which defines all the logic, and multiple presenters which each use some or all of the data and callbacks passed to it to render each “type”.

Container Example

Presenter Example

Liked that post? Try this one next:

Jordan is a freelance engineer with full-stack chops, and an eye for analytics and growth.