$30 off During Our Annual Pro Sale. View Details »

Smart and Dumb Components

Jake Trent
February 09, 2016

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/

Jake Trent

February 09, 2016

More Decks by Jake Trent

Other Decks in Programming


  1. None
  2. DAN ABRAMOV Term coined by

  3. CONTAINER & PRESENTATIONAL Later called them components


    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

  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

  11. None
  12. None
  13. None
  14. None
  15. Make the transition faster Scattered props Access to Container references

    1-* SPLIT
  16. “Broad” eg, ReportsUsersContainer -> * 1-* SPLIT

  17. None
  18. None
  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

  21. None
  22. None
  23. None
  24. ANOTHER EXAMPLE <Dumb componentProp={<AnotherDumb />} />

  25. None
  26. None
  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
  29. None
  30. WHOLE REDUCER <Dumb reducerName={this.props.reducer} /> Lazy? Couples view to reducer

    format in more places eg, OverallTrendWidgetContainer -> OverallTrendWidget
  31. None
  32. None
  33. NEW PRIMITIVES <Dumb newPrimitive={this.props.primitive} /> Explicit Traceable Decoupled

  34. None
  35. DISTINGUISHING Rule of thumb: @styleable(css) @connect([selector]) class OneReactComponent extends AntiPattern

  36. DOGMA It’s an art Pirates’ Code Think