Avoiding Jank in React + Redux
Sean Reece
jsprf.com
Software Engineer @ Qlik
Jank? 🐢
Slow / Stuttery UI performance
This talk
How we discovered jank @Qlik 🤦♀️
How we solved 🎉
Redux performance pitfalls 👻
🙅♂️
Huge list of performance improvements
React is fast
?
Reconcilliation
Diffing algorithm
Virtual DOM
render() -> tree -> compare
FAST... but still expensive
Renderer
react-dom
react-native
react-GL
react-blessed
react-tv
react-pdf
...
areOwnPropsEqual
areStatesEqual
mapStateToProps
areStatePropsEqual
mergeProps
shouldComponentUpdate
render
reconciliation
commit > react-dom
componentDidUpdate
Time
react-redux
react
Expensive
Point of no return
props
update lifecycle
Time
react-redux
redux
counter
files
store
combineReducers
mapStateToProps
1 Store
👨💻
Jank Demo
mapStateToProps is called on EVERY state change
🚨
> {} === {}
> false
selector pattern
abstract store queries
memoized selectors
reselect 🔥
takeaways
avoid reconciliation 🙅♂️
mapStateToProps runs on EVERY state change 🔥
mapStateToProps should be FAST 🐇
don't return new references from mapStateToProps 🚫
redux reducers are combined into single object ☝️
reselect for success 💯