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
Performance & React
By garitychapman
Performance & React
- 909
