Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Performance Optimization

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

Theo Pak

January 19, 2017
Tweet

More Decks by Theo Pak

Other Decks in Technology

Transcript

  1. REACT
    PERFORMANCE
    THEO PAK
    @THEOPAK
    Waltham Frontend Devs Meetup January 2017
    201
    7
    OPTIMIZATION

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  6. Chrome DevTools

    View full-size slide

  7. React Developer Tools (Chrome plugin)

    View full-size slide

  8. Lighthouse (Chrome plugin)

    View full-size 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 full-size slide

  10. 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 full-size slide

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

    View full-size slide

  12. 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 full-size slide

  13. Thanks!
    Theo Pak

    @theopak

    API Management Tribe

    developer.cimpress.io

    View full-size slide