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 💯 

 

Avoiding Jank in React + Redux - ReactJS Ottawa Talk

By seanreece

Avoiding Jank in React + Redux - ReactJS Ottawa Talk

Slides for Oct 2018 ReactJS Ottawa meetup talk about avoiding "Jank" when using React/Redux.

  • 70
Loading comments...

More from seanreece