Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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



    Others have compared them to
  2. 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
  3. Separation of concern Easier to reason about Localize complexity Lots

    simple components UI bits more reusable BENEFITS
  4. App needs to be smart Have data Respond to interaction

    Mostly dumb Lots of UI WHERE TO SPLIT?
  5. "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?
  6. ALL PROPS <Dumb {…this.props} /> True wrapper Passthrough, provides additional

    functionality eg, OverallTrendWidgetContainer -> OverallTrendWidget
  7. WHOLE REDUCER <Dumb reducerName={this.props.reducer} /> Lazy? Couples view to reducer

    format in more places eg, OverallTrendWidgetContainer -> OverallTrendWidget