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.

Transcript

1. Dive into React Perf
   CT Wu, 2016 @ JSDC
   Twitter: wu_ct
   Github: wuct
   Email: wu.chingting@gmail.com
   

   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 react-dom@15.4.0-rc.4
    import ReactDOMFiber from 'react-dom/fiber'
    

    View Slide

31. Thanks!
    • Github: wuct
    • Twitter: wu_ct
    • wu.chingting@gmail.com
    

    View Slide