Performance & React

You can learn a lot about how something works by Figuring Out how it breaks.

So when is react slow?

When React is forced to do more work than is necessary.

Wait. How do We know it is slow?

Measure it!

Well It feels slow.

Now what?

React Peformance Tools

import Perf from 'react-addons-perf'

npm install react-addons-perf

// Expose tools on window object
window.Perf = Perf;

Get Measurements

Perf.start()

//interact with your app

Perf.stop()

Print Results

//shows DOM manipulations made
Perf.printOperations()

//shows time spent on components where the render stayed the same
Perf.printWasted()

Reconciliation

The process of finding the minimum number of changes that must be made in order to make the virtual DOM tree and the actual DOM tree identical.

Keys play a Pivotal role in React's reconciliation.

Reconciling Random Keys

0.09

0.89

0.23

0.56

0.92

0.02

0.43

Current Dom =>

Re Rendering

=>

x

x

x

x

Reconciling Index Based Keys

0

1

2

3

1

0

2

Current Dom =>

Re Rendering

=>

x

x

x

Reconciling ID Based Keys

0

1

2

3

2

1

3

Current Dom =>

Re Rendering

=>

x

x

printWasted

//shows time spent on components where the render stayed the same
Perf.printWasted()

Pure Components

React.PureComponent is exactly like React.Component but implements shouldComponentUpdate()

all child components Must Be "pure"

use immutable data structures (try Immutable.js !)

Keep <li> in their own component

Use ids for keys

Implement PureComponent

=>

=>

=>

THANKS!

Resources

“Performance Engineering With React” By Saif Hakim http://benchling.engineering/performance-engineering-with-react/

“Optimizing React Performance using keys, component life cycle, and performance tools” By Jae Hun Ro http://jaero.tech/blog/react-performance-1

“React Performance Tune-Up” By Dave Johnson http://engineering.invisionapp.com/post/react-performance-tune-up/

“Turbocharge Your React Application with shouldComponentUpdate and Immutable.js” By Tomas Weiss
https://blog.javascripting.com/2015/03/31/turbocharge-your-react-application-with-shouldcomponentupdate-and-immutable-js/

Reconciliation in the React docs https://facebook.github.io/react/docs/reconciliation.html

Made with Slides.com