Joe Karlsson
progress. tech. cats. coffee. art. food. photog. mpls.
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
High Performance React Applications
By Joe Karlsson
High Performance React Applications
React is built with performance in mind. But when is React slow? In this talk we’ll discuss common bottlenecks in React and when you might be making your program work harder than it should.
