Container Components – Learn React with chantastic – Medium

Container Components:  by @learnreact #Reactjs #JavaScript #WebDev

  • Your component is responsible for both fetching data and presenting it.
  • Say you have a component that displays comments.
  • Nestled in the talk is this gem about container components .
  • Lets pull out data-fetching into a container component.
  • I’m a big fan of container components.

At React.js Conf, Jason Bonta talked about how they build High Performance Components at facebook. Nestled in this talk is this gem about container components. Say you have a component that displays…

@HappyFunCorp: Container Components: by @learnreact #Reactjs #JavaScript #WebDev

One React pattern that has had the greatest effect on my code is the container component pattern.

At React.js Conf, Jason Bonta talked about how they build High Performance Components at facebook. Nestled in this talk is this gem about container components.

The idea is simple:

A container does data fetching and then renders its corresponding sub-component. That’s it.

“Corresponding” meaning a component that shares the same name:

You get the idea.

Why containers?

Say you have a component that displays comments. You didn’t know about container components. So, you put everything in one place:

super();

this.state = { comments: [] }

$.ajax({

url: “/my-comments.json”,

dataType: ‘json’,

success: function(comments) {

this.setState({comments: comments});

}.bind(this)

return

    {this.state.comments.map(renderComment)}

;

renderComment({body, author}) {

return

  • {body}—{author}
  • ;

    Your component is responsible for both fetching data and presenting it. There’s nothing “wrong” with this but you miss out on a few benefits of React.

    CommentList can’t be reused unless under the exact same circumstances.

    Your markup components should state expectations of the data they require. PropTypes are great for this.

    Our component is opinionated about data structure but has no way of expressing those opinions. This component will break silently if the json endpoint change.

    Once again. This time with a container

    First, lets pull out data-fetching into a container component.

    super();

    this.state = { comments: [] }

    $.ajax({

    url: “/my-comments.json”,

    dataType: ‘json’,

    success: function(comments) {

    this.setState({comments: comments});

    }.bind(this)

    return ;

    Now, let’s rework CommentList to take comments as a prop.

    super(props);

    return

      {this.props.comments.map(renderComment)}

    ;

    renderComment({body, author}) {

    return

  • {body}—{author}
  • ;

    So, what did we get?

    We actually got a lot…

    We’ve separated our data-fetching and rendering concerns.

    We’ve made our CommentList component reusable.

    We’ve given CommentList the ability to set PropTypes and fail loudly.

    I’m a big fan of container components. They’re stepping up my React game a lot and making my components easier to read. Give them a try and watch Jason’s talk. It’s excellent!

    Carry on, nerds.

    Container Components – Learn React with chantastic – Medium