Building
High Performance React Applications
slides.com/joekarlsson | @joekarlsson1
I am
Joe Karlsson
Software Engineer
How's this going to work?
Why?
My sites are fast enough...
- no one ever
40%
of users abandon an article if it doesn't load after six seconds
Danny Bernstein, Google
+100ms delay
-1% Amazon’s sales
http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html
2015
$1,070,000,000
Optimizing
on the client
50% optimization
~ 45% of final impact
is simple
immediate results
SO YOU WANNA GO FAST?
Short Answer
ONLY RENDER W H E N Y O U REALLY NEED TO
Long Answer
How To Measure Performance
Use built-in
react_perf tools
34 ms
Use
🔑 Key 🔑
Correctly
The key is used to uniquely identify an element
NEVER USE
Math.random()or
index during a map(element, index)
class List extends Component {
render() {
const itemNode = this.props.posts.map((item, idx) => {
return <Item post={ item } key={ Math.random() } />;
})
return <div>{ itemNode }</div>;
}
};class List extends Component {
render() {
const itemNode = this.props.posts.map((item, idx) => {
return <Item post={ item } key={ idx } />;
})
return <div>{ itemNode }</div>;
}
};Manage
shouldComponentUpdate
Specify
exactly when a component should render
class Item extends Component {
shouldComponentUpdate(nextProps, nextState) {
if (this.props.title !== nextProps.title) {
return true;
}
return false;
}
render() {
return <h3>{ this.props.title }</h3>
}
};Extend PureComponent instead of Component
Does a
shallow comparison of all props/state and will only render if any of them change
class Item extends PureComponent {
render() {
return <h3>{ this.props.title }</h3>
}
};✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
Before you go all in on PureComponent ...
Build For
⚡️Production ⚡️
Using
renders 2–8x faster than the development build
NODE_ENV = 'production'-
Use key 🗝 correctly
-
Manage shouldComponentUpdate
-
Extend PureComponent instead of Component
-
Build for production ⚡️
Final
Thoughts
Profile your app often
ONLY RENDER WHEN YOU REALLY NEED TO
Make it work, then make it fast
Resources
Feedback Welcome!
Please fill out this feedback form:
https://goo.gl/forms/Hsn6oonjyIl1yxCm1