Performance optimisations for React applications

Image for post
Image for post

TLDR;

Video

Disclaimers!

What is the main performance hotspot in React applications?

What is the default render behaviour in React?

Initial render

Image for post
Image for post

Proposed change

Image for post
Image for post

Ideal update

Image for post
Image for post

Default behaviour

Image for post
Image for post

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

Written by

JavaScript enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store