Performance Engineering with React
Submitted by Rahul Dole (@rahuldole) on Thursday, 4 August 2016
Section: Full talk Technical level: Advanced
You know how awesome React is, but do you know React has still kept some room for you to have a chance at increasing its performance even more? What is the average number of times your React components render unnecessarily on a single set state - 3, 4, 5? Or have you even checked that yet? We’ll see how we can optimise your components so that we minimise or eliminate unnecessary renders, virtual DOM diffing, DOM manipulation, etc., which can give you significant performance gains in large applications.
The audience needs to be familiar with the basics of React, to the least.
In this session we’ll take a more in-depth approach to understanding how ‘shouldComponentUpdate’ method of a React component works. This will enable us to realise it’s importance and then we can look at the various ways we can make the best of it to optimise React’s performance.
One of the approaches will cover using Immutable JS towards this end. We’ll also see what are the ‘gotchas’ to check for in implementing ‘shouldComponentUpdate’. Other approaches caution against using Function.bind() and literal arrays/objects, while also encouraging to break up your components effectively in order to optimise performance.
On the go, we’ll also see how to measure performance of your components using React’s performance tools, including one case study.
I’m a frontend developer with extensive experience in building complex web apps from scratch involving several key architectural decisions, and also leading UI teams. I’ve been using React for about 2 years now. I also have given beginner to advanced level trainings in React to my teams.