React Performance Optimization

Theo Pak
@theopak

Waltham Frontend Developers Meetup: Thursday January 19, 2017 @ Vistaprint/Cimpress

Speaker notes:

1. What to expect:
- 45 minutes including live demos and Q&A
- technical talk
- applicable to all frontend developers, with specific strategies for working with React

2. Hi! I'm Theo. I use React every day.

3. perf optimization is important, but not the most important

4-5. main idea: You can optimize for performance by measuring and then making intentional changes. Frequently, those changes are related to things that affect how React represents component identity. If you keep these things in mind then you'll write better web apps.

6-8. Introduce and then demo each of 3 tools, highlighting when to use them:
a. Chrome DevTools — Network > DOMContentLoaded, Timeline for details
b. React Developer Tools (Chrome plugin) — inspect react components
c. Lighthouse (Chrome plugin) — look at key metrics

9. react-addons-perf introduction

10. Now all tools have been introduced but not explained in depth. Move to live demo and profile app to measure the visible badness of it's completely unoptimized state.

11. Emphasize: code changes have measurable impact, be aware of what you're doing and work intentionally
- `const key = (book.identifiers && book.identifiers.openlibrary[0]) || i`

12. Illustrate: component key selection affects reconciliation.

13. main idea

14. Q&A

Transcript

1. REACT PERFORMANCE THEO PAK @THEOPAK Waltham Frontend Devs Meetup January 2017 201 7 OPTIMIZATION
2. Theo Pak Software Engineer API Management Tribe developer.cimpress.io We use react to build the Cimpress Open developer portal. https://developer.cimpress.io
3. frontend development 2017 • functional reactive programming • unidirectional data flow • immutable data structures • type hinting • build systems • code splitting • universal/isomorphic rendering • Service Workers • app performance profiling today’s topic!
4. caveat: avoid early optimization when to optimize • luckily, frameworks are generally fast out of the box • do performance optimization when you notice issues • think about how react does it’s work why optimize • people don’t like slow apps → fast apps make more money! how to optimize • it’s possible to measure what’s happening in your app • …using data from production deployments • …using dev tools on production builds • …using dev features in dev builds • advice: look at production first (high level) and make your way towards code
5. performance optimization “What should I look for when profiling?”
6. Chrome DevTools
7. React Developer Tools (Chrome plugin)
8. Lighthouse (Chrome plugin)
9. react-addons-perf import Perf from "react-addons-perf" // Instrument work in your app Perf.start() // … Perf.stop() // Get measurements (interface docs: https://facebook.github.io/react/docs/perf.html) Perf.printOperations() // print DOM operations Perf.printWasted() // nice! print time spend on Components that didn’t end up changing anything # Install the package $ npm install react-addons-perf # React Perf tools only work in dev builds $ npm start
11. render () { {this.state.books.map((book, i) => { // Compare and contrast the rendered output when different keys are used const key = Math.random() // demo (1): this ends up being different every render const key = i // demo (2): this is the same as the array order const key = ‘ideas anyone?’ // demo (3): there’s another option! can anyone guess? return ( <BookRow key={key} i={i} {...book} /> ) })} } measuring the impact of component key selection
12. measuring the impact of component key selection images: http://jaero.tech/blog/react-performance-1
13. main concepts use keys and comparable data structures so that react can figure out what to render use shouldComponentUpdate() to tell react when not to render use children wisely
14. Thanks! Theo Pak @theopak API Management Tribe developer.cimpress.io