Tweet
Tweet

Slide 1

Slide 1 text

React Performance @jergason

Slide 2

Slide 2 text

BUY React Rally Tickets http://reactrally.com

Slide 3

Slide 3 text

React Performance

Slide 4

Slide 4 text

ONE WEIRD TRICK for speeding up your React applications

Slide 5

Slide 5 text

ONE WEIRD TRICK

Slide 6

Slide 6 text

ONE WEIRD TRICK Have a deep knowledge of React's rendering model and JavaScript execution combined with familiarity with browser and React performance tooling.

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

How React Works How Optimization Works Demo

Slide 9

Slide 9 text

How React Works

Slide 10

Slide 10 text

setState render render render

Slide 11

Slide 11 text

dispatch reducer render render render render render render

Slide 12

Slide 12 text

How Optimization Works

Slide 13

Slide 13 text

Rules of Optimization 1.Don't 2.Don't yet 3.Profile before optimizing http://c2.com/cgi/wiki?RulesOfOptimization

Slide 14

Slide 14 text

Optimization In React

Slide 15

Slide 15 text

Render will be called MANY TIMES

Slide 16

Slide 16 text

Two Options • call render fewer times • make render faster

Slide 17

Slide 17 text

Demo https://github.com/jergason/slowloris

Slide 18

Slide 18 text

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