Container Components – Learn React with chantastic – Medium

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

  • Container ComponentsOne React pattern that’s had the impact on my code is the container component pattern.
  • So, you put everything in one place: – class CommentList extends React.Component { – this.state = { comments: [] }; – – componentDidMount() { – fetchSomeComments(comments = – this.setState({ comments: comments })); – } render() { – return ( – ul – {this.state.comments.map(c = ( – li{c.body}—{c.author}/li – ))} -…
  • class CommentListContainer extends React.Component { – state = { comments: [] }; componentDidMount() { – fetchSomeComments(comments = – this.setState({ comments: comments })); – } render() { – return CommentList comments={this.state.comments} /; – } – }Now, let’s rework CommentList to take comments as a prop.
  • const CommentList = props = – ul – {props.comments.map(c = ( – li{c.body}—{c.author}/li – ))} – /ulExample Codepen – 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.

Say you have a component that displays comments. You didn’t know about container components. So, you put everything in one place: Your component is responsible for both fetching data and presenting…

Container ComponentsOne React pattern that’s had the impact on my code is the container component pattern.

In Jason Bonta talk High Performance Components, there’s this little 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:

StockWidgetContainer = StockWidget

TagCloudContainer = = PartyPooperListYou 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:

class CommentList extends React.Component {

this.state = { comments: [] };

componentDidMount() {

fetchSomeComments(comments =

this.setState({ comments: comments }));

} render() {

return (

ul

{this.state.comments.map(c = (

li{c.body}—{c.author}/li

))}

/ul

);

}

}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.

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

Data structureYour 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.

Container Components – Learn React with chantastic – Medium