React Performance Optimization

287abe4d8c0bf8eae92dd59b753f6323?s=47 Theo Pak
January 19, 2017

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

287abe4d8c0bf8eae92dd59b753f6323?s=128

Theo Pak

January 19, 2017
Tweet