Tweet
Tweet

Slide 1

Slide 1 text

React Performance tools

Slide 2

Slide 2 text

React Performance tools Prathamesh Sonpatki @_cha1tanya @BigBinary

Slide 3

Slide 3 text

React is generally very fast

Slide 4

Slide 4 text

Complex DOM structure Infinite lists Mobile browsers

Slide 5

Slide 5 text

Where time gets spent

Slide 6

Slide 6 text

Re-Rendering

Slide 7

Slide 7 text

Profiling using PERF

Slide 8

Slide 8 text

PERF demo

Slide 9

Slide 9 text

shouldComponentUpdate

Slide 10

Slide 10 text

shouldComponentUpdate

Slide 11

Slide 11 text

shouldComponentUpdate

Slide 12

Slide 12 text

shouldComponentUpdate Demo

Slide 13

Slide 13 text

Pure components

Slide 14

Slide 14 text

Static components

Slide 15

Slide 15 text

Break the UI into smaller components

Slide 16

Slide 16 text

PureRenderMixin

Slide 17

Slide 17 text

Demo

Slide 18

Slide 18 text

shallow compare

Slide 19

Slide 19 text

Immutable data

Slide 20

Slide 20 text

update addon

Slide 21

Slide 21 text

immutable-js

Slide 22

Slide 22 text

Compiler optimizations

Slide 23

Slide 23 text

github.com/ thejameskyle/ babel-react-optimize

Slide 24

Slide 24 text

Recap

Slide 25

Slide 25 text

Pure components

Slide 26

Slide 26 text

Comparable data

Slide 27

Slide 27 text

Independent children

Slide 28

Slide 28 text

Loosely coupled components

Slide 29

Slide 29 text

Thanks blog.bigbinary.com @_cha1tanya