A light hearted presentation revealing the dark art of front-end performance engineering using React / Redux. Presented by the engineers at StrataMap.

1. Hogwarts Guide to
React/Redux Performance
Hugh Walcott - CTO / Modelling Wizardry
Julie Bureau - Code Witchcraft
Jack Morris - Front-End Magician
Photo by Artem Maltsev
.io

2. “Any sufficiently
advanced
technology is
indistinguishable
from magic.”
ARTHUR C. CLARKE

3. React + Redux Anyone?

4. Our Challenge:
Build a High
Performance
Digital
Modelling
Platform

5. “Numbing the pain for a while
will make it worse when you
finally feel it.”
Harry Potter and the Goblet of Fire
Redux Performance

7. Components re-render on
prop change.

8. Components re-render on
prop change.
PURE COMPONENTS
Simplifying props to native
types, splitting if necessary
IMMUTABILITY
Remove state cloning
NORMALIZE
Avoid inefficient data
structures
Flattening the state tree
MEMOISATION
Only return data if
changed (i.e. cache)

9. React-dev-tools
(did not work for canvas)
Why-did-you-render
(https://github.com/welldone-software/why-did-you-render)

12. COMPONENT QUIDDITCH - 1ST HALF

13. COMPONENT QUIDDITCH - 2ND HALF

14. Performance Starts With
Tools, Process & People.
THANK YOU
.io