Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactJS - The Container component pattern
Search
Khánh Trần
October 25, 2016
Programming
0
61
ReactJS - The Container component pattern
A short slide for ReactJS workshop.
Khánh Trần
October 25, 2016
Tweet
Share
More Decks by Khánh Trần
See All by Khánh Trần
Docker-Compose workshop
rualatngua
2
230
Seneca workshop
rualatngua
0
140
[ReactJS How to Workshop] Day 01
rualatngua
1
53
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
Discover Metal 4
rei315
2
130
ふつうの技術スタックでアート作品を作ってみる
akira888
1
820
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.5k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
190
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Facilitating Awesome Meetings
lara
54
6.4k
Side Projects
sachag
455
42k
It's Worth the Effort
3n
185
28k
4 Signs Your Business is Dying
shpigford
184
22k
Navigating Team Friction
lara
187
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Transcript
The Container Component pattern
Container Components? A container does data fetching and then renders
its corresponding sub-component. That’s it. — - Jason Bonta • StockWidgetContainer => StockWidget • TagCloudContainer => TagCloud
Why containers? // CommentList.js class CommentList extends React.Component { constructor()
{ super(); this.state = { comments: [] } } componentDidMount() { $.ajax({ url: "/my-comments.json", dataType: 'json', success: function(comments) { this.setState({comments: comments}); }.bind(this) }); } render() { return <ul> {this.state.comments.map(renderComment)} </ul>; } renderComment({body, author}) { return <li>{body}—{author}</li>; } }
There’s nothing “wrong” with this but... ...you miss out on
a few benefits of React
Reusability CommentList can’t be reused unless under the exact same
circumstances. • Top Customer Reviews vs. Most Recent Customer Reviews
Data structure Your markup components should state expectations of the
data they require. PropTypes are great for this. — - Learn React with chantastic
This time with a container // CommentListContainer.js class CommentListContainer extends
React.Component { constructor() { super(); this.state = { comments: [] } } componentDidMount() { $.ajax({ url: "/my-comments.json", dataType: 'json', success: function(comments) { this.setState({comments: comments}); }.bind(this) }); } render() { return <CommentList comments={this.state.comments} />; } }
Let's rework on CommentList to get comments as a prop
// CommentList.js class CommentList extends React.Component { constructor(props) { super(props); } render() { return <ul> {this.props.comments.map(renderComment)} </ul>; } renderComment({body, author}) { return <li>{body}—{author}</li>; } }
So, what did we get? • We’ve separated our data-fetching
and rendering concerns. • We’ve made our CommentList component reusable. • ...next >
...we’ve given CommentList the ability to set PropTypes and fail
loudly CommentList.propTypes = { comments: React.PropTypes.object.isRequired }
Q&A
Bonus: Making your app fast with high- performance components