React Performance
Optimizations
Best Practices
@MCirlanaru
Slide 2
Slide 2 text
Get in touch.
Mihai Cîrlănaru
Software Engineering Lead
@mihai
#squad-nomad
Slide 3
Slide 3 text
High Order Components
stateless
PureComponent
shouldComponentUpdate
Shallow Compare
Immutable data
state transition
Component tree
Diffing Algorithm
Profiling
Chrome Dev Tools Flame Graph
react-addons-perf
keys
Reconciliation
props change
?react_perf
Functional components
recompose
render
React
Slide 4
Slide 4 text
Basics
What you should know
Pitfalls
What you should avoid
Profiling
What you should look for
Performance Optimizations
Slide 5
Slide 5 text
01Basics
React Performance Optimizations
What you should know
Slide 6
Slide 6 text
Component Tree
React is
FAST
Performs the minimum
amount of operations to
update the DOM tree
based on state or property
changes
setState
Slide 7
Slide 7 text
Component Tree
Dirty state
Components that need
updating are marked as
“dirty” -- i.e. to be rerender
Dirty
Slide 8
Slide 8 text
Component Tree
Rerender
Component sub-trees are
rerendered even though
some might not have
changed at all
Rerendered
Slide 9
Slide 9 text
Component Tree
Selective
sub-tree
rendering
What if a component
sub-tree does not change
at all?
Dirty
Slide 10
Slide 10 text
Component Tree
Selective
sub-tree
rendering
Prevent rerendering of
component sub-trees with
shouldComponentUpdate
Rerendered
Slide 11
Slide 11 text
● control whether a component should be
rerendered or not
● must be very efficient
○ it is called all the time
○ should take less time computing the
heuristic than rendering the component
shouldComponentUpdate
Slide 12
Slide 12 text
Pure Components
● React.Component with a shallow prop and state
comparison for shouldComponentUpdate
● complex data structures can result in
false-negatives for deeper differences
● skips prop updates for the whole component
subtree -- make sure all the children components
are also “pure”
Slide 13
Slide 13 text
Functional Stateless Components
● useful for “dumb” presentational components
● more predictable and simpler to test
● open up possibilities for further performance
optimizations
○ memoization
○ composition
○ etc.
fn
fn
fn
Slide 14
Slide 14 text
Reconciliation
How React figures out how to efficiently update the
UI to match the most recent component tree:
The Diffing Algorithm
Slide 15
Slide 15 text
Before
Diffing
Level by level comparison
of the component tree to
find the minimal number of
modifications needed after
state/prop change
After
Slide 16
Slide 16 text
01
Different types
Slide 17
Slide 17 text
01
Different types
● tears down old DOM tree
● builds a new tree from scratch
● MyComponent is remounted
Slide 18
Slide 18 text
02
Same types
Slide 19
Slide 19 text
02
Same types
● keeps same underlying DOM
● updates the changed attributes
● MyComponent does not change
Slide 20
Slide 20 text
03
Recursing on
children
Slide 21
Slide 21 text
03
Recursing on
children
● First two
trees match
● The only change is the addition of the
third
tree
Slide 22
Slide 22 text
03
Recursing on
children
Slide 23
Slide 23 text
03
Recursing on
children
● every child
tree will be mutated
● everything is rebuilt from scratch
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
keys
React uses the key attribute to match children in the
original tree with children in the subsequent tree
Slide 26
Slide 26 text
03
Recursing on
children
Slide 27
Slide 27 text
03
Recursing on
children
● children elements matched by key
● only top
tree is added
● key only has to be unique among its
siblings, not globally unique
● keys should be stable and predictable
(e.g. no Math.random())
Slide 28
Slide 28 text
02Pitfalls
React Performance Optimizations
What you should avoid
Slide 29
Slide 29 text
(re)Render
Components with no
changes in props or state
should not rerender
Before After
setState
Slide 30
Slide 30 text
Arrow
functions
What happens when arrow
functions are used inline,
as props, for a component
Before
?
Slide 31
Slide 31 text
Before
● new callback function every render
● props change for MyComponent
● component is rerendered
Arrow
functions
(re)render!
BAD
Slide 32
Slide 32 text
Before
Arrow
functions
Define outside of render to
ensure they are the same
from one render to another
GOOD
Slide 33
Slide 33 text
{ } or [ ]
What happens when
objects or arrays are used
inline, as props, for a
component
Before
?
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Before
● new array or object every render
● props change for MyComponent
● component is rerendered
{ } or [ ]
(re)render!
BAD
Slide 36
Slide 36 text
Before
{ } or [ ]
(re)render!
GOOD
Slide 37
Slide 37 text
Changing
DOM tree
Avoid reconciliation
● tears down old DOM tree
● builds a new tree from scratch
● MyComponent is remounted
BAD
Slide 38
Slide 38 text
03Profiling
React Performance Optimizations
What you should look for
Slide 39
Slide 39 text
● React pre v16
● development mode only
● Perf object
○ start
○ stop
○ getLastMeasurements
● Pretty print in console
○ printWasted(measurements)
○ printInclusive(measurements)
react-addons-perf
componentWillMount*
componentDidUpdate*
* or any other relevant method/function
Slide 40
Slide 40 text
● React v15.4+
● development mode only
● ?react_perf
● User Timing section
Chrome Dev Tools