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

Dive into React Performance

wuct
October 23, 2016

Dive into React Performance

Three ways to improve the performance of a React app:

1. Reduce call to React.createElement
2. Avoid reconciliation
3. Avoid re-mounting

This talk explains why and how do we use these approaches.

wuct

October 23, 2016
Tweet

More Decks by wuct

Other Decks in Programming

Transcript

  1. Dive into React Perf
    CT Wu, 2016 @ JSDC
    Twitter: wu_ct
    Github: wuct
    Email: [email protected]

    View Slide

  2. Better performance leads to better user experience

    View Slide

  3. Use the production version of React

    View Slide

  4. Use a bundler


    process.env.NODE_ENV = "production"
    Use pre-built files

    View Slide

  5. How does React work?

    View Slide

  6. createElement(View, {}, [
    createElement(View),
    createElement(View)
    ])




    {
    type: View,
    props: {
    children: [
    { type: View },
    { type: View },
    ]
    }
    }

    View Slide

  7. ReactDOM.render( )

    View Slide

  8. setState()

    View Slide

  9. • Reduce call to React.createElement()
    • Avoid reconciliation
    • Avoid re-mounting

    View Slide

  10. render() {
    return (



    Header 1
    Header 2




    Footer 1
    Footer 2



    {
    // ...
    }


    )
    }
    const headerAndFooter =


    Header 1
    Header 2




    Footer 1
    Footer 2


    render() {
    return (

    {headerAndFooter}

    {
    // ...
    }


    )
    }

    View Slide

  11. setState()
    bailout

    View Slide

  12. shoudComponentUpdate(nextProps, nextState) {
    if (/* You want to update */) {
    return true
    }
    return false
    }

    View Slide

  13. Pure Render Optimization
    shoudComponentUpdate(nextProps, nextState) {
    return (
    !shallowEqual(nextProps, this.props) ||
    !shallowEqual(nextState, this.state)
    )
    }
    class extends React.PureComponent {
    // ...
    }
    or

    View Slide

  14. Anti Pure Render
    render() {
    return (
    inlineFunc={() => {}}
    funcBind={func.bind(this)}
    arrayLiteral={[]}
    newArray={map(…)}
    objectLiteral={{}}
    newObject={assign({}, …)}
    >


    )
    }

    View Slide

  15. Static View Optimization
    import StaticContainer from 'react-static-container'
    shoudComponentUpdate() {
    return false
    }
    or

    View Slide

  16. React Internal Bailout
    • Bailout when prevElement === nextElement
    • Don’t bailout when prevContext !== nextContext
    • React always create a new context
    • Don’t use setState() and getChildContext() in one
    component

    View Slide

  17. class extends React.Component {
    getChildContext() {
    return this.state
    }
    componentDidMount() {
    setInterval(() =>
    this.setState({
    time: this.state.time + 1
    })
    , 1000)
    }
    // ...
    }

    View Slide

  18. • Updating is faster than re-mounting
    • Don’t change the key or the type if you want to
    update

    View Slide

  19. render() {
    return isDarkTheme
    ?
    :
    }
    render() {
    dark={isDarkTheme}
    />
    }

    View Slide

  20. render () {
    return (

    {
    data.map(item =>
    key={item.uniqueId}
    />
    )
    }

    )
    }
    render () {
    return (

    {
    data.map(item =>
    key={Math.random()}
    />
    )
    }

    )
    }

    View Slide

  21. React Perf Tool
    • Currently, only supports the development version of
    React
    • Perf.start()
    • Perf.stop()
    • Perf.printWasted()
    • Perf.printOperations()

    View Slide

  22. class Child extends React.Component {
    render() {
    return
    }
    }
    class App extends React.Component {
    state = { title: 'Foo' }
    render() {
    return (

    {this.state.title}


    )
    }
    }

    View Slide

  23. Perf.start()
    app.setState({ title: ‘bar’ })
    Perf.stop()
    Perf.printWasted()

    View Slide

  24. class Child extends React.PureComponent {
    render() {
    return
    }
    }

    View Slide

  25. Perf.start()
    app.setState({ title: ‘bar’ })
    Perf.stop()
    Perf.printWasted()

    View Slide

  26. class App extends React.Component {
    state = { theme: 'light' }
    render() {
    return (

    {
    this.state.theme === 'light'
    ?
    :
    }

    )
    }
    }

    View Slide

  27. Perf.start()
    app.setState({ theme: 'dark' })
    Perf.stop()
    Perf.printOperations()

    View Slide

  28. class App extends React.Component {
    state = { theme: 'light' }
    render() {
    return (



    )
    }
    }

    View Slide

  29. Perf.start()
    app.setState({ theme: 'dark' })
    Perf.stop()
    Perf.printOperations()

    View Slide

  30. React Fiber
    • Is still experimental
    • Prioritization
    • Return multiple elements from render
    • Try it now:
    npm i [email protected]
    import ReactDOMFiber from 'react-dom/fiber'

    View Slide

  31. Thanks!
    • Github: wuct
    • Twitter: wu_ct
    [email protected]

    View Slide