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'
  1. Use key 🗝 correctly

  2. Manage shouldComponentUpdate

  3. Extend PureComponent instead of Component

  4. 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.

  • 1,629