ReactFoo Delhi

ReactFoo Delhi

On React, alternatives to React, ReactNative and front-end engineering

Ankur Sethi

Ankur Sethi

@s3thi

Hitting 60 FPS: How to Discover and Fix Performance Issues in React Applications

Submitted Jun 29, 2018

In this hands-on session, I will dive deep into the Chrome Developer Tools and walk you through discovering and fixing common performance issues that affect React applications.

I will begin by using the Chrome Developer Tools to profile an existing application that is known to have terrible performance. Then, I’ll interpret the profiling data, pinpoint the performance issues, fix them, and profile the application again to verify that the changes I made actually had an effect. At the end of the session, I’ll be left with an application that loads fast and runs fast.

In the course of the session, you will learn how to understand and interpret the immense amount of data produced by the Chrome profiler.

Outline

If you don’t consider the performance cost of new features before adding them to your React applications, you will find that your apps get slower over time and begin to drive away users. An app that is blazing fast today might bring even a high-end computer to its knees tomorrow, infuriating users and causing revenues to slip.

In this hands-on session, I will walk you through discovering and fixing common performance issues that affect React applications. All the issues I will talk about are based on real-world situations I’ve seen on my clients’ websites (including Quintype, Insider, and Pratham Books).

  • I will begin by using the Chrome Developer Tools to profile an application that is known to have terrible performance.
  • I’ll interpret the profiling data, make educated guesses about the causes of slowness or jank, and test out my theories by making changes to the application.
  • Once I’m sure of the root cause of a particular issue, I’ll proceed to fix it. I’ll then profile the application again to verify that I’ve actually fixed the problem.
  • At the end of the session I’ll be left with an application that loads fast and runs fast.

This will not be a tutorial on using the profiling tools built into Chrome, but an exercise in interpreting the results produced by them in order to arrive at actionable changes we can make to our codebase so we can improve performance.

We will combine Chrome’s profiling data with our knowlege about our own code, browser behaviors, and best practices to guess at the causes of jank, and use the scientific method of experimentation and measurement to arrive at fixes.

Speaker bio

Ankur Sethi leads the Web Engineering team at Uncommon in Bangalore. He builds applications with JavaScript, TypeScript, and (sometimes) Rust. He has terrible taste in music, which he inflicts on unsuspecting strangers if handed the AUX cord at parties.

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more