React Performance

@stevekinney
Demystifying Performance in React
Steve Kinney
NationJS React: December, 2018

View Slide

@stevekinney
Hi, I’m Steve.
(@stevekinney)

View Slide

@stevekinney

View Slide

@stevekinney
We’re going to think about
performance.

View Slide

@stevekinney
Chapter One
What is performance and why
does it matter?

View Slide

@stevekinney
Why does performance
matter?

View Slide

@stevekinney
Allow me to use some slides with
too many words and then read them
too you. #thoughtleadership101

View Slide

@stevekinney
Actually, I’m not…

View Slide

“
@stevekinney
0.1 second is about the limit for having the user feel that
the system is reacting instantaneously, meaning that no
special feedback is necessary except to display the result.
—Jakob Nielsen

View Slide

“
@stevekinney
1.0 second is about the limit for the user's ﬂow of
thought to stay uninterrupted, even though the
user will notice the delay. Normally, no special
feedback is necessary during delays of more
than 0.1 but less than 1.0 second, but the user
does lose the feeling of operating directly on the
data. —Jakob Nielsen

View Slide

“
@stevekinney
10 seconds is about the limit for keeping the user's
attention focused on the dialogue. For longer delays,
users will want to perform other tasks while waiting for
the computer to ﬁnish, so they should be given feedback
indicating when the computer expects to be done.
Feedback during the delay is especially important if the
response time is likely to be highly variable, since users
will then not know what to expect. —Jakob Nielsen

View Slide

@stevekinney

View Slide

@stevekinney
Now I’ll show you some statistics
to make myself sound smart.

View Slide

@stevekinney
Aberdeen Group found that a 1 second
slow down resulted 11% fewer page
views, 7% less conversion. Source.

View Slide

@stevekinney
Akamai found that two-second delay
in web page load time increase
bounce rates by 103 percent. Source.

View Slide

@stevekinney
A 400 millisecond improvement in
performance resulted in a 9% increase
in trafﬁc at Yahoo. Source.

View Slide

@stevekinney
Google found that a 2% slower page
resulted in 2% fewer searches, which
means 2% fewer ads shown. Source.

View Slide

@stevekinney
100 millisecond improvement in
performance results in 1% increase in
overall revenue at Amazon. Source.

View Slide

@stevekinney
One more thing…

View Slide

@stevekinney
According to “research” , if you want user
to feel like your site is faster than your
competitors, you need to be 20% faster.

View Slide

@stevekinney
Thinking About Performance

View Slide

@stevekinney

View Slide

@stevekinney
There are different kinds of
performance.

View Slide

@stevekinney

View Slide

“
@stevekinney
Measure. Don’t tune for speed until you’ve
measured, and even then don’t unless one part
of the code overwhelms the rest. —Rob Pike

View Slide

@stevekinney
What matters to you?
• The New York Times might care about time to ﬁrst headline.
• Twitter might care about time to ﬁrst tweet.
• Chrome might care about time to inspect element.
• What does your product or project care about?

View Slide

@stevekinney
Don’t get carried away with
measuring, either.

View Slide

@stevekinney
Thinking deeply about the architecture
of your application is a better use of
your time than micro-benchmarks.

View Slide

@stevekinney
Three Tiers of Advice
• Deﬁnitely do this.
• Maybe do this, but measure before and after.
• Only do this if you ﬁnd a performance problem that needs
solving.

View Slide

@stevekinney
What are you sacriﬁcing?
Readability? Reliability?

View Slide

@stevekinney
Some Disclaimers
• React is decently fast out of the box.
• Being all crazy about performance at the expense of creating
value for your users is not awesome.
• We’re going to look at some contrived examples because most
larger code bases are: private, hard to grok during at talk, and
hard to fake.

View Slide

@stevekinney
And now: Steve’s Golden Rule
of Performance

View Slide

@stevekinney
Doing Less Stuff Takes Less
Time.

View Slide

@stevekinney
We’ll cover some of these concepts today.
• Don’t reconcile the virtual DOM if you don’t have do.
• Keep your state ﬂat and primitive.
• Don’t add functions to the call stack if you don’t need to.
• Share things that don’t change instead of reinventing the
wheel.

View Slide

@stevekinney
Chapter Two
Who Hurt You?

View Slide

@stevekinney
React 16 lets your measure components’
lifecycles using the User Timing API.

View Slide

@stevekinney
Three Main Requirements
• React 16+ in development mode.
• Source maps.
• Chrome developer tools.

View Slide

@stevekinney
?react_perf

View Slide

@stevekinney

View Slide

@stevekinney
Chapter Three
Optimizing React
Performance

View Slide

@stevekinney
Free tip: Make sure you’re
running in Production Mode.

View Slide

@stevekinney
What is production mode?
• PropTypes? Nah.
• “Helpful” warnings? No, thanks.
• Performance metrics? Nope.
• Not having this stuff relieves React of a bunch of work and
allows it to run fast.

View Slide

@stevekinney

View Slide

@stevekinney
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin()

View Slide

@stevekinney
Question: What makes React
fast?

View Slide

@stevekinney
Answer: The virtual DOM™.
• Making changes to the real DOM is slow.
• Making lots of little changes to the DOM can add up.
• The virtual DOM let’s us change an object in memory—which is
way faster.
• Then it ﬁgures out of to do the most efﬁcient change all at
once.

View Slide

@stevekinney
React’s reconciliation process
compares the previous output from the
render() method with the new one.

View Slide

@stevekinney
Corollary: Not checking the component
tree is faster than checking it.

View Slide

@stevekinney
shouldComponentUpdate()

View Slide

@stevekinney

View Slide

@stevekinney
class MyComponent extends React.Component {
shouldComponentUpdate() {
return true;
}
}

View Slide

@stevekinney
shouldComponentUpdate() {
return false;
}
}

View Slide

@stevekinney
class UserAvatar extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return nextProps.user.avatar === this.props.user.avatar;
}
}

View Slide

@stevekinney

View Slide

@stevekinney
Pure Components

View Slide

@stevekinney
shouldComponentUpdate(nextProps, nextState) {
return (
shallowCompare(this.props, nextProps) &&
shallowCompare(this.state, nextState);
);
}
}

View Slide

@stevekinney
const FunctionalPureComponent = React.memo((props) => {
/* only rerenders if props change */
});

View Slide

@stevekinney
A Word of Warning

View Slide

@stevekinney

View Slide

@stevekinney
Moving Stuff Around (Or,
“Not Being Lazy with Keys”)

View Slide

@stevekinney
That annoying warning about omitting
a key when iterating over a collection
is actually pretty important…

View Slide

@stevekinney
It helps React ﬁgure out whether
this is something new or just an
existing thing that’s moved.

View Slide

@stevekinney

const Posts = (posts) => (

{ posts.map((post, index) => ) }

);
const Posts = (posts) => (

{ posts.map((post) => ) }

);

View Slide

@stevekinney
Action Items
• Use a unique identiﬁer as the key.
• Don’t use the index of the item in the array.
• FFS, don’t use Math.random(). You are better than that.

View Slide

@stevekinney
Chapter Four
State Management

View Slide

@stevekinney
How you manage state in your application
can have some important implications on
the performance of your application.

View Slide

@stevekinney
Prefer Primitives

View Slide

@stevekinney
Primitives (strings, numbers,
booleans) are passed by value.

View Slide

@stevekinney
Objects—including arrays and
functions—are passed by reference.

View Slide

@stevekinney
1 === 1;
'a' === 'a';
true === true;
{ a: 1 } !== { a: 1 }
[1, 2, 3] !== [1, 2, 3]
(a, b) => a + b !== (a, b) => a + b;

View Slide

@stevekinney
Keep Your Data Flat

View Slide

@stevekinney
const posts = {
first: {
title: 'The Good News About React Hooks',
description: 'They exist, but not yet.',
},
second: {
title: 'Classes Are Dead! Long Live Classes!',
description: "Or, maybe not. I don't really know.",
},
};
posts.second = { ...posts.second, description: 'Definitely not soon.' };

View Slide

@stevekinney
posts === posts;

View Slide

@stevekinney
const posts = {
first: {
comments: {
123: {
author: 'Steve Kinney',
bio: {
twitter: '@stevekinney',
company: 'SendGrid',
},
body: 'First!',
responses: {
456: {
author: 'Ksenia Coulter',
body: 'You never sent me your fun fact!', // What if I want to update this?
}
},
},
},
},
// …
};

View Slide

@stevekinney
this.setState({
posts: {
...this.state.posts,
first: {
...this.state.posts.first,
comments: {
...this.state.posts.first.comments,
responses: {
...this.state.posts.first.comments.responses,
firstResponse: {
...this.state.posts.first.comments.firstResponse,
body: 'What is your spirit animal?'
}
}
}
}
}
});

View Slide

@stevekinney
const state = {
posts: {
firstPostId: {
author: 'firstAuthorId',
comments: ['firstCommentId', 'secondCommentId'],
},
// …
},
authors: {
firstAuthorId: {
name: 'Robbie Holmes',
twitter: ‘@robbiethegeek',
},
},
comments: {
firstCommentId: {
body: 'Commenting on my own post!',
author: 'firstAuthorId',
},
// …
},
};

View Slide

@stevekinney
paularmstrong/normalizr

View Slide

@stevekinney
{
"id": "123",
"author": {
"id": "1",
"name": "Paul"
},
"title": "My awesome blog post",
"comments": [
{
"id": "324",
"commenter": {
"id": "2",
"name": "Nicole"
}
}
]
}

View Slide

@stevekinney
import { normalize, schema } from 'normalizr';
const user = new schema.Entity('users');
const comment = new schema.Entity('comments', {
commenter: user
});
const article = new schema.Entity('articles', {
author: user,
comments: [comment]
});
const normalizedData = normalize(originalData, article);

View Slide

@stevekinney
{
result: "123",
entities: {
"articles": {
"123": {
id: "123",
author: "1",
title: "My awesome blog post",
comments: [ "324" ]
}
},
"users": {
"1": { "id": "1", "name": "Paul" },
"2": { "id": "2", "name": "Nicole" }
},
"comments": {
"324": { id: "324", "commenter": "2" }
}
}
}

View Slide

@stevekinney
You wouldn’t be wrong to think of
your application state as an in-
memory, NoSQL database.

View Slide

@stevekinney
Pro Tip: Break up your
containers.

View Slide

@stevekinney
Me, like a year or two ago…
const PostsList = posts => (

{posts.map(post => (

))}

);
const PostsListContainer = connect(posts => posts);

View Slide

@stevekinney
Me, today…
const PostsList = (ids) => (

{ids.map(id => (

))}

);

View Slide

@stevekinney
Memoize Your Containers

View Slide

@stevekinney
Reselect

View Slide

@stevekinney
Fun Fact About Selectors
• Selectors can compute derived data, allowing Redux to store
the minimal possible state.
• Selectors are efﬁcient. A selector is not recomputed unless one
of its arguments changes.
• Selectors are composable. They can be used as input to other
selectors.
• (This list is from the ofﬁcial documentation.)

View Slide

@stevekinney
Chapter Five
Ship Less Code

View Slide

@stevekinney
Parsing and compiling can take up
the lion’s share of your
application’s load time.

View Slide

@stevekinney

View Slide

@stevekinney
Corollary: If you ship less code, then
you’ll have less to parse and compile.

View Slide

@stevekinney
Lazy-loading and pre-loading
with React and webpack

View Slide

@stevekinney
And now: A review of Steve’s
golden rules for performance.

View Slide

@stevekinney
Not doing stuff is faster than
doing stuff.

View Slide

@stevekinney
Doing stuff later is a way to
not do stuff now. So, it’s faster.

View Slide

@stevekinney

View Slide

@stevekinney
import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));
const MyComponent = () => {
return (
Loading ... }>

);
}

View Slide

@stevekinney
import Loadable from 'react-loadable';
const OtherComponent = Loadable({
loader: () => import('./OtherComponent'),
loading: Loading ... ,
});
const MyComponent = () => {
return (

);
}

View Slide

@stevekinney
react-lazyload
import React from 'react';
import LazyLoad from 'react-lazyload';
import MyComponent from './MyComponent';
const App = () => {
return (

);
};

View Slide

@stevekinney
Takeaways
• Some libraries have code you don’t need. See if you can get
that out of your build.
• Get the code you need now now.
• Get the code you need later later.
• Your tools can help you do this.

View Slide

@stevekinney
Chapter Six
Using Build Tools to Do Hard
Work

View Slide

@stevekinney
And now: Steve’s Silver Rule
of Performance

View Slide

@stevekinney
Let your build tools do
boring stuff for you.

View Slide

@stevekinney

View Slide

@stevekinney
Let’s ﬁle these under “maybe
use.”

View Slide

@stevekinney
npm install @babel/plugin-
transform-react-remove-prop-types

View Slide

@stevekinney
import PropTypes from 'prop-types';
class Announcement extends React.Component {
render() {
return (

Important Announcement
{this.props.content}

)
}
}
Announcement.propTypes = {
content: PropTypes.string,
}
export default Announcement;

View Slide

@stevekinney
import PropTypes from 'prop-types';
render() {
return
;
}
}

View Slide

@stevekinney
{
"plugins": [
"syntax-jsx",
[ "transform-react-remove-prop-types",
{
"removeImport": true
}
]
]
}

View Slide

@stevekinney
render() {
return
;
}
}

View Slide

@stevekinney
{
"plugins": [
"syntax-jsx",
[ "transform-react-remove-prop-types",
{
"mode": "wrap"
}
]
]
}

View Slide

@stevekinney
Announcement.propTypes = process.env.NODE_ENV !== "production" ? {
content: PropTypes.string
} : {};

View Slide

@stevekinney
npm install babel-plugin-
transform-react-pure-class-to-
function

View Slide

@stevekinney
render() {
return (


)
}
}

View Slide

@stevekinney
function Announcement(props) {
return
{props.content}
;
}

View Slide

@stevekinney
What if the component has
state?

View Slide

@stevekinney
class Counter extends React.Component {
constructor() {
super();
this.state = 0;
}
render() {
return {this.state.count} ;
}
}

View Slide

@stevekinney
Why is this cool?

View Slide

@stevekinney
npm install @babel/plugin-
transform-react-constant-elements

View Slide

@stevekinney
class Article extends React.Component {
render() {
return (

—The Management

)
}
}

View Slide

@stevekinney
var _ref = Important Announcement ;
var _ref2 = —The Management ;
render() {
return
{_ref}
{_ref2}
;
}
}

View Slide

@stevekinney

View Slide

@stevekinney
for (let x = 0; x < 10; x ++) {
console.log(x);
}

View Slide

@stevekinney
console.log(0);
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);

View Slide

@stevekinney
(function () {
function fibonacci(x) {
return x <= 1 ? x : fibonacci(x - 1) + fibonacci(x - 2);
}
global.x = fibonacci(10);
})();

View Slide

@stevekinney

View Slide

@stevekinney
Appendix
A Conclusion of Sorts

View Slide

@stevekinney
Some things to think about…
• Are we testing performance on fancy MacBook Pros or
consumer-grade hardware?
• Are we simulating less-than-perfect network conditions.
• What is our performance budget?

View Slide

@stevekinney
In Review
• Build for production.
• Proﬁle ﬁrst!
• Don’t check components for updates if you can help it.
• Prefer primitives.
• Keep your state lean and mean.

View Slide

@stevekinney
Thank You!
@stevekinney
https://bit.ly/electronjs

View Slide

React Performance

React Performance

Steve Kinney

More Decks by Steve Kinney

Other Decks in Technology

Featured

Transcript