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
   

   View Slide

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
   

   View Slide

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!
   

   View Slide

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
   

   View Slide

5. performance optimization
   “What should I look for when profiling?”
   

   View Slide

6. Chrome DevTools
   

   View Slide

7. React Developer Tools (Chrome plugin)
   

   View Slide

8. Lighthouse (Chrome plugin)
   

   View Slide

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
   

   View Slide

10. View Slide

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 (
    key={key}
    i={i}
    {...book} />
    )
    })}
    }
    measuring the impact of component key selection
    

    View Slide

12. measuring the impact of component key selection
    images: http://jaero.tech/blog/react-performance-1
    

    View Slide

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
    

    View Slide

14. Thanks!
    Theo Pak
    
    @theopak
    
    API Management Tribe
    
    developer.cimpress.io
    

    View Slide