Performance optimisations for React applications

TLDR;

Video

Disclaimers!

What is the main performance hotspot in React applications?

What is the default render behaviour in React?

Initial render

Proposed change

Ideal update

Default behaviour

How do we get the ideal update?

Make shouldComponentUpdate checks fast

Make shouldComponentUpdate checks easy

Problem 1: huge shouldComponentUpdate functions

Problem 2: tight coupling of parents to children

Fix: Denormalize your data

Gotcha: reference checking and dynamic props

Strategies to overcome the issue

Special case: functions

Tooling

console.time

React.perf

Browser tools

Update

JavaScript enthusiast