React Performance: ONE WEIRD TRICK

How do you optimize React applications? WITH ONE WEIRD TRICK

Transcript

1. React Performance @jergason
2. BUY React Rally Tickets http://reactrally.com
3. React Performance
4. ONE WEIRD TRICK for speeding up your React applications
5. ONE WEIRD TRICK
6. ONE WEIRD TRICK Have a deep knowledge of React's rendering model and JavaScript execution combined with familiarity with browser and React performance tooling.
7. ONE WEIRD TRICK Have a deep knowledge of React's rendering model and JavaScript execution combined with familiarity with browser and React performance tooling and know some basic techniques of general optimization.
8. How React Works How Optimization Works Demo
9. How React Works
10. setState render render render
11. dispatch reducer render render render render render render
12. How Optimization Works
13. Rules of Optimization 1.Don't 2.Don't yet 3.Profile before optimizing http://c2.com/cgi/wiki?RulesOfOptimization
14. Optimization In React
15. Render will be called MANY TIMES
16. Two Options • call render fewer times • make render faster
17. Demo https://github.com/jergason/slowloris
18. Resources • https://facebook.github.io/react/docs/perf.html • https://facebook.github.io/react/docs/advanced- performance.html • http://benchling.engineering/performance- engineering-with-react/ • http://benchling.engineering/deep-dive-react-perf- debugging/ • https://github.com/reddit/reddit-mobile/issues/247