In this talk we will take a look at some React performance measurement tools: react-perf for projects built with React prior to version 16 and React Performance add-on for projects built with React 16 and above.

CONTENTS

0:07 - Intro
0:10 - React Developer Tools
0:17 - Chrome Developer Tools
0:33 - React Perf for React 15
0:57 - React Performance Devtool for React 16

1:24 - React 15 Demo Performance App
2:40 - Measuring performance with Chrome Dev Tools
4:00 - Measuring performance with React Perf
5:31 - Fixing tree reconciliation issue
6:39 - Fixing “print wasted” re-rendering issue
8:57 - CPU slowdown option
9:10 - PureComponent
9:54 - Running performance tool outside Chrome and Firefox using console

10:48 - React 16 Performance Demo App
11:48 - Measuring performance with React Performance tool
12:44 - Fixing tree reconciliation issue
13:09 - Diagnostics with React Performance tool
13:38 - pureComponent and inline styles
16:16 - Styles tie comparison
16:38 - Using React Developer tools
17:29 - Some other tips
18:13 - Question: Why would you use componentWillMount

RESOURCES

Slides
https://speakerdeck.com/itreverie/tools-for-measuring-react-performance

Source code
https://github.com/itReverie/itr-performance-react15
https://github.com/itReverie/itr-performance-react16


React Developer Tools
https://github.com/facebook/react-devtools

React Perf (React 15)
https://github.com/crysislinux/chrome-react-perf

React Performance Devtool (React 16)
https://github.com/nitin42/react-perf-devtool