Building

High Performance React Applications

slides.com/joekarlsson | @joekarlsson1

I am
Joe Karlsson

​@JoeKarlsson1

@JoeKarlsson

joekarlsson.com

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

Source: https://www.bbc.com/news/technology-34465270

@joekarlsson1

+100ms delay

-1% Amazon’s sales

Source: http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

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

Webpack Bundle Analyzer NPM Repo

Profile your app often 🏃

@joekarlsson1

Make it work,
then make it fast

@joekarlsson1

  1. Use key 🗝 correctly

  2. Manage shouldComponentUpdate

  3. Extend ✨PureComponent ✨

  4. Use Immutable Data 🔒

  5. Build for production ⚡️

@joekarlsson1

  1. Analyze webpack bundle 🔬

  2. Profile often 🏃💨

  3. Render when really needed

  4. Make it work,
    then make it fast 🏃💨

@joekarlsson1

​@JoeKarlsson1

@JoeKarlsson

joekarlsson.com

Let's Stay In Touch!

Resources:

@joekarlsson1

Made with Slides.com