This document discusses React component lifecycles and how React performs efficient re-renders. It explains the different lifecycle methods like componentWillMount, componentDidMount, etc. It then discusses how React batches state updates and only re-renders components when necessary using techniques like shouldComponentUpdate. It also explains React's reconciliation algorithm which intelligently updates the DOM by diffing virtual DOM trees in an efficient way when keys are provided. Overall the document provides an overview of key techniques React uses to optimize re-rendering for performance.

1. Something about Lifecycle

2. Something about Lifecycle
componentWillMount

3. Something about Lifecycle
componentWillMount
componentDidMount

4. Something about Lifecycle
componentWillMount
componentDidMount
Mounting

5. Something about Lifecycle
componentWillMount
componentDidMount
Mounting
render
…

6. Something about Lifecycle

7. Something about Lifecycle
componentWillReceiveProps

8. Something about Lifecycle
componentWillReceiveProps
shouldComponentUpdate

9. Something about Lifecycle
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate

10. Something about Lifecycle
componentWillReceiveProps
shouldComponentUpdate
Pre-updating
componentWillUpdate

11. Something about Lifecycle
componentWillReceiveProps
shouldComponentUpdate
Pre-updating
render
…
componentWillUpdate

12. Something about Lifecycle

13. Something about Lifecycle
render

14. Something about Lifecycle
componentDidUpdate
render
…

15. Something about Lifecycle
componentDidUpdatePost-updating
render
…

16. Something about Lifecycle
componentDidUpdate
componentWillUnmount
Post-updating
render
…

17. Something about Lifecycle
componentDidUpdate
componentWillUnmount
Post-updating
render
…
Unmounting

19. The usage of React is intuitive

20. The usage of React is intuitive
We re-render whenever state changes

21. The usage of React is intuitive
We re-render whenever state changes
Re-rendering seems expensive…

22. The usage of React is intuitive
We re-render whenever state changes
Re-rendering seems expensive…
But the truth is

23. The usage of React is intuitive
React is FAST!!!
We re-render whenever state changes
Re-rendering seems expensive…
But the truth is

24. The usage of React is intuitive
React is FAST!!!
We re-render whenever state changes
Re-rendering seems expensive…
But the truth is
WTF???

25. Batching
Sub-tree Rendering

26. Batching
• Whenever you call setState on a component,
React will mark it as dirty. At the end of the event
loop, React looks at all the dirty components and
re-renders them.
• This batching means that during an event loop,
there is exactly one time when the DOM is being
updated. This property is key to building a
performant app and yet is extremely difficult to
obtain using commonly written JavaScript. In a
React application, you get it by default.

27. Batching
• Whenever you call setState on a component,
React will mark it as dirty. At the end of the event
loop, React looks at all the dirty components and
re-renders them.
• This batching means that during an event loop,
there is exactly one time when the DOM is being
updated. This property is key to building a
performant app and yet is extremely difficult to
obtain using commonly written JavaScript. In a
React application, you get it by default.

28. Sub-tree Rendering
• Whenever you call setState on a component,
React will mark it as dirty. At the end of the event
loop, React looks at all the dirty components and
re-renders them.
• This batching means that during an event loop,
there is exactly one time when the DOM is being
updated. This property is key to building a
performant app and yet is extremely difficult to
obtain using commonly written JavaScript. In a
React application, you get it by default.

29. Sub-tree Rendering
• Whenever you call setState on a component,
React will mark it as dirty. At the end of the event
loop, React looks at all the dirty components and
re-renders them.
• This batching means that during an event loop,
there is exactly one time when the DOM is being
updated. This property is key to building a
performant app and yet is extremely difficult to
obtain using commonly written JavaScript. In a
React application, you get it by default.
With shouldComponentUpdate, you have control over
whether a component should be re-rendered.

30. Sub-tree Rendering
• Whenever you call setState on a component,
React will mark it as dirty. At the end of the event
loop, React looks at all the dirty components and
re-renders them.
• This batching means that during an event loop,
there is exactly one time when the DOM is being
updated. This property is key to building a
performant app and yet is extremely difficult to
obtain using commonly written JavaScript. In a
React application, you get it by default.
shouldComponentUpdate
This function is going to be called all the time, so
you want to make sure that it takes less time to
compute the heuristic than the time it would have
taken to render the component, even if re-rendering
was not strictly needed.

31. React
Reconciliation

32. React
Reconciliation
a.k.a. Diff Algorithm

33. Why Another
Tree Diff Algorithm?

34. Why Another
Tree Diff Algorithm?
O(n3)

35. Why Another
Tree Diff Algorithm?
O(n3)
1000 nodes would require in the order of
ONE BILLION
comparisons.

36. 2 Basic Assumptions

37. 2 Basic Assumptions
• Two components of the same class will generate
similar trees and two components of different
classes will generate different trees.

38. 2 Basic Assumptions
• Two components of the same class will generate
similar trees and two components of different
classes will generate different trees.
• It is possible to provide a unique key for
elements that is stable across different renders.

39. Pair-wise Diff
Different Node Types
renderA: <div />
renderB: <span />
=> [removeNode <div />], [insertNode <span />]
Code
renderA: <Header />
renderB: <Content />
=> [removeNode <Header />], [insertNode <Content />]
Code

40. Pair-wise Diff
DOM Nodes
renderA: <div id="before" />
renderB: <div id="after" />
=> [replaceAttribute id "after"]
Code
renderA: <div style={{color: 'red'}} />
renderB: <div style={{fontWeight: 'bold'}} />
=> [removeStyle color], [addStyle font-weight 'bold']
Code

41. List-wise Diff
Problematic Case
renderA: <div><span>first</span></div>
renderB: <div><span>first</span><span>second</span></div>
=> [insertNode <span>second</span>]
Code
renderA: <div><span>first</span></div>
renderB: <div><span>second</span><span>first</span></div>
=> [replaceAttribute textContent 'second'], [insertNode
<span>first</span>]
Code

42. List-wise Diff
Problematic Case
renderA: <div><span>first</span></div>
renderB: <div><span>first</span><span>second</span></div>
=> [insertNode <span>second</span>]
Code
renderA: <div><span>first</span></div>
renderB: <div><span>second</span><span>first</span></div>
=> [replaceAttribute textContent 'second'], [insertNode
<span>first</span>]
Code
Levenshtein Distance
O(n2)

43. List-wise Diff
Keys
renderA: <div><span key="first">first</span></div>
renderB: <div><span key="second">second</span><span
key="first">first</span></div>
=> [insertNode <span>second</span>]
Code
If you specify a key, React is now able to find insertion,
deletion, substitution and moves in O(n) using a hash table.

44. Trade-offs

45. Trade-offs
• The algorithm will not try to match sub-trees of different
components classes. If you see yourself alternating
between two components classes with very similar
output, you may want to make it the same class. In
practice, we haven't found this to be an issue.

46. Trade-offs
• The algorithm will not try to match sub-trees of different
components classes. If you see yourself alternating
between two components classes with very similar
output, you may want to make it the same class. In
practice, we haven't found this to be an issue.
• If you don't provide stable keys (by using
Math.random() for example), all the sub-trees are
going to be re-rendered every single time. By giving
the users the choice to choose the key, they have the
ability to shoot themselves in the foot.

47. Where to go from here?
& Acknowledgements
• Official Documentation: https://
facebook.github.io/react/
• React’s diff algorithm: http://
calendar.perfplanet.com/2013/diff/
• React Demystified: http://blog.reverberate.org/
2014/02/react-demystified.html

48. Thanks