Smart and Dumb Components

What are smart and dumb React components? This describes the split of app-level and presentational UI. Here are a few thoughts on separating these.

Read the post: http://jaketrent.com/post/smart-dumb-components-react/

Transcript

2. DAN ABRAMOV Term coined by
3. CONTAINER & PRESENTATIONAL Later called them components
4. C IN MVC = SMART V IN MVC = DUMB Others have compared them to
5. How things work No DOM markup, no styles Provide data Call actions How things look No app dependencies Just props, for data and callbacks Rarely have own state, only UI state
6. Separation of concern Easier to reason about Localize complexity Lots simple components UI bits more reusable BENEFITS
7. * (UI noun) MemberTableHeader SearchInput FieldErrors OrgInvitesPendingContainer OrgPageContainer ReportsUsersContainer *Container NAMING
8. App needs to be smart Have data Respond to interaction Mostly dumb Lots of UI WHERE TO SPLIT?
9. Simplest One transition into dumb components 1-1 SPLIT
10. “Deep” 1 component, many props eg, OrgLayoutContainer -> OrgLayout 1-1 SPLIT
15. Make the transition faster Scattered props Access to Container references 1-* SPLIT
16. “Broad” eg, ReportsUsersContainer -> * 1-* SPLIT
19. "When you notice that some components don’t use the props they receive but merely forward them down and you have to rewire all those intermediate components any time the children need more data, it’s a good time to introduce some container components.” @dan_abramov MOAR BROAD?
20. CONTAINMENT props.children props.other React.PropTypes.node Name *Layout
24. ANOTHER EXAMPLE <Dumb componentProp={<AnotherDumb />} />
27. PROPS TO PASS? <Dumb {…this.props} /> <Dumb reducerName={this.props.reducer} /> <Dumb newPrimitive={this.props.primitive} />
28. ALL PROPS <Dumb {…this.props} /> True wrapper Passthrough, provides additional functionality eg, OverallTrendWidgetContainer -> OverallTrendWidget
30. WHOLE REDUCER <Dumb reducerName={this.props.reducer} /> Lazy? Couples view to reducer format in more places eg, OverallTrendWidgetContainer -> OverallTrendWidget
33. NEW PRIMITIVES <Dumb newPrimitive={this.props.primitive} /> Explicit Traceable Decoupled
35. DISTINGUISHING Rule of thumb: @styleable(css) @connect([selector]) class OneReactComponent extends AntiPattern
36. DOGMA It’s an art Pirates’ Code Think
37. THANK YOU