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
Why?
@joekarlsson1
My sites are fast enough...
- no one ever
@joekarlsson1
40% of users abandon an article if it doesn't load after six seconds
- Danny Bernstein, Google
@joekarlsson1
+100ms delay
-1% Amazon’s sales
2015
$1,070,000,000
@joekarlsson1
Optimizing
on the client
-
Simpler than optimizing on the server
-
You see immediate results
-
More "bang for your buck"
@joekarlsson1
SO YOU WANNA GO FAST?
Short Answer
@joekarlsson1
ONLY RENDER WHEN YOU REALLY NEED TO
@joekarlsson1
Long Answer
@joekarlsson1
How To Measure Performance
@joekarlsson1
Use built-in
react_perf tools
@joekarlsson1
34 ms
@joekarlsson1
Use
🔑 Key 🔑
Correctly
@joekarlsson1
The key is used to uniquely identify an element
@joekarlsson1
NEVER USE
Math.random()or
index during a map(element, index)
@joekarlsson1
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>;
}
};@joekarlsson1
Manage
shouldComponentUpdate
@joekarlsson1
Specify
exactly when a component should render
@joekarlsson1
class Item extends Component {
shouldComponentUpdate(nextProps, nextState) {
if (this.props.title !== nextProps.title) {
return true;
}
return false;
}
render() {
return <h3>{ this.props.title }</h3>
}
};@joekarlsson1
Extend
✨PureComponent✨ instead of
🐢Component🐢
@joekarlsson1
Does a
shallow comparison of all props/state
@joekarlsson1
Will only render
if props/state change
@joekarlsson1
class Item extends PureComponent {
render() {
return <h3>{ this.props.title }</h3>
}
};✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
✨
@joekarlsson1
Before you go
all in on PureComponent ...
@joekarlsson1
Use
🔒 Immutable 🔒
Data
@joekarlsson1
Fancy 🎩 word for making a new copy of a object
@joekarlsson1
Immutability makes tracking changes cheap.
@joekarlsson1
Build For
⚡️ Production ⚡️
@joekarlsson1
Using
renders ~2–8x faster than the development build
NODE_ENV = 'production'@joekarlsson1
What about stateless components?
@joekarlsson1
More thoughts on performance
@joekarlsson1
Analyze your webpack bundle 🔬
@joekarlsson1
Profile your app often 🏃
@joekarlsson1
Make it work,
then make it fast
@joekarlsson1
-
Use key 🗝 correctly
-
Manage shouldComponentUpdate
-
Extend ✨PureComponent ✨
-
Use Immutable Data 🔒
-
Build for production ⚡️
@joekarlsson1
-
Analyze webpack bundle 🔬
-
Profile often 🏃💨
-
Render when really needed
-
Make it work,
then make it fast 🏃💨
@joekarlsson1
Let's Stay In Touch!
Resources:
@joekarlsson1
High Performance React Applications - Web Rebels
By Joe Karlsson
High Performance React Applications - Web Rebels
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.
