Workshop: React Performance

There’s a lot of tools and talks about loading performance – but what if every time you click a button in your app, the app lags a bit? Let’s learn how to deal with that.

In this workshop with Ivan Akulov, a Google Developer Expert, full-stack software engineer, and performance consultant, you will learn how to reproduce, diagnose, and resolve runtime React performance issues to give your app a speed boost.

Mid-level or Senior engineers: these folks have a solid production React experience and are very familiar with useMemo, useCallback, and PureComponent/React.memo. Still, they would love to get more familiar with Chrome DevTools, React Profiler, and more tools and approaches for diagnosing and debugging React performance issues.

The workshop will last for 4 days: on January 16, 17, 19 and 20. Also additional bonus days for Standard + 1 Bonus Day and Standard + 3 Bonus Days ticket members: on January 23, 24 and on February 7 (GMT+2).

Language: English

Zoom + Slack. The workshop will take place in Zoom. We’ll also create a shared Slack channel for long-term link sharing.

Exercises. In the end of each session, we’ll split into groups to do exercises. For exercises, please bring a laptop with Chrome, React DevTools, Git, Node.js, Yarn, and your favorite IDE installed.

On the first day, we’ll dive deep into the most common React performance anti-pattern: unnecessary renders. We’ll use Chrome DevTools and React Profiler to profile a slow app and figure out what’s making it slow. Then, step-by-step, we’ll fix every issue we found.

We’ll look at another common React performance issue: an expensive render. We’ll see how modern browser APIs (such as isInputPending() and web workers) help to make the page run smoothly even with very costly computations. We’ll also take a look at React 18’s startTransition.

On the third day, we’ll learn to recognize, profile, and optimize chains of rerenders, which happen when some code triggers several renders in a row. This one is frequent in large single-page apps! We’ll also explore what happens every time the browser renders a new frame on the screen–learn what to do when browser’s CSS/layout costs get out of control.

Page loading speed is a whole separate topic we’re not covering in this workshop. However, we’ll use everything we learned so far to dive into a very React-specific loading performance issue: hydration time of server-rendered apps. Expect to see , React Server Components, and more.

Not everyone uses Redux. But if you do, chances are Redux is making your app slower. During this bonus day, we’ll explore a few Redux performance antipatterns. We’ll also learn multiple ways to fix them, ranging from writing better selectors to making architectural changes.

Most advice about bundles focuses on making them smaller. However, bundles take time not only to download, but also to execute. And on low-end devices (such as inexpensive Android phones), execution time might be even longer than loading time. So, let’s explore profiling and optimizing bundles in webpack apps.

Attended the workshop, tried optimizing your React app, and have some questions now? This is the right place for them. Two weeks after the workshop ends, we’ll meet again to answer any questions you might have after trying the workshop advice in practice. And don’t forget to bring your apps for some live debugging!