ways to measure & boost performance of your react app

REACT PERFORMANCE

HOW TO SPEED YOUR APP UP

My name is Kateryna Porshnieva

live in Kiev, Ukraine

work as Front-End Developer & UI/UX designer at YouScan

teach React & Redux course in Ukraine

@krambertech

PART 1:

WHAT MAKES APPS FEEL `FAST`

‣Fast load speed

‣Fast user interactions

‣Smooth animations

PART 2:

FIRST LOAD SPEED

BUNDLE SIZE

1. SET NODE_ENV TO `PRODUCTION`

2. TRANSFORM REACT CONSTANT ELEMENTS

3. INLINE REACT ELEMENTS

4. REMOVE PROPTYPES

5. TRANSFORM PURE CLASS TO FUNCTION

REACT-OPTIMIZE ❤

6. REMOVE UNUSED LOCALES FROM MOMENT.JS

1.98 MB -> 1.24 MB

PART 3:

PERFORMANT UPDATES

- Everyone

“React is fast”

VIRTUAL DOM

React re-renders the whole app on any state (data) change

PART 4:

MEASURING PERFORMANCE

CONSOLE.TIME

CHROME DEVTOOLS ELEMENTS PANE

REACT 15.4 +

CHROME DEVTOOLS TIMELINE

REACT-ADDONS-PERF

FPS-METER

REACT DEVTOOLS +

TRACE REACT UPDATES

PART 5:

OPTIMIZING PERFORMANCE

SHOULDCOMPONENTUPDATE

PURE COMPONENTS

react v15.3 and higher

OPTIMIZING FOR PURE COMPONENTS

1. FUNCTION.BIND / ARROW FUNCTIONS

2. ARRAYS / OBJECTS CREATION

3. MODIFICATION BY REFERENCE

IMMUTABLE.JS

PART 7:

REDUX PERFORMANCE

CONNECT COMPONENTS TO STATE AT LOWER LEVEL

MEMOIZATION

PART 8:

PRETEND WORKING FAST

SPINNERS / PROGRESS BARS

<1s 1-4s >4s

Nothing Spinner Progress bar

OPTIMISTIC UPDATES

Image credit: https://uxplanet.org/optimistic-1000-34d9eefe4c05

Image credit: https://uxplanet.org/optimistic-1000-34d9eefe4c05

Image credit: https://uxplanet.org/optimistic-1000-34d9eefe4c05

VIRTUAL SCROLLING

Image credit: https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209

Image credit: https://bvaughn.github.io/connect-tech-2016/#/8/4

CACHING

PART 9:

WHEN TO OPTIMIZE

FIN.