How can we improve our React apps performance? 1. Use the production version of React 2. Reduce call to createElement() 3. Avoid reconciliation 4. Avoid re-mounting 5. Use React Perf tool to debug And here are how and why.

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

2. Better performance leads to better user experience

3. Use the production version of React

4. Use a bundler
<script src="path/to/react.min.js"></script>
<script src="path/to/react-dom.min.js"></script>
process.env.NODE_ENV = "production"
Use pre-built files

5. How does React work?

6. createElement(View, {}, [
createElement(View),
createElement(View)
])
<View>
<View />
<View />
</View>
{
type: View,
props: {
children: [
{ type: View },
{ type: View },
]
}
}

7. ReactDOM.render( )

8. setState()

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

10. render() {
return (
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
<tbody>
{
// ...
}
</tbody>
</table>
)
}
const headerAndFooter =
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
render() {
return (
<table>
{headerAndFooter}
<tbody>
{
// ...
}
</tbody>
</table>
)
}

11. setState()
bailout

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

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

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

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

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

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

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

19. render() {
return isDarkTheme
? <DarkApp />
: <LightApp />
}
render() {
<App
dark={isDarkTheme}
/>
}

20. render () {
return (
<List>
{
data.map(item =>
<Item
key={item.uniqueId}
/>
)
}
</List>
)
}
render () {
return (
<List>
{
data.map(item =>
<Item
key={Math.random()}
/>
)
}
</List>
)
}

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

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

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

24. class Child extends React.PureComponent {
render() {
return <div />
}
}

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

26. class App extends React.Component {
state = { theme: 'light' }
render() {
return (
<div>
{
this.state.theme === 'light'
? <Light />
: <Dark />
}
</div>
)
}
}

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

28. class App extends React.Component {
state = { theme: 'light' }
render() {
return (
<div>
<Content theme={this.state.theme} />
</div>
)
}
}

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

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'

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