Workshop: React Performance

A practical online workshop by Ivan Akulov, who will share his own knowledge on how to speed up the React apps.
Online
Event is over
Workshop: React Performance
Workshop: React Performance
Event is over
Event is over
Event is over

Registration for the next conference JavaScript fwdays’23 conference is open!

Workshop description:

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.

“The format of the workshop is great. We get to actually hear the thought process behind the debugging and profiling, why we chose one technique or the other. We get to reflect on the choices and discuss them live.” – Vyacheslav, May 2022

“I really liked just watching over Ivan’s shoulder while he did the analysis. Ivan kept things really simple – no sophisticated, expensive tooling, just patiently analyzing the profiles we were taking, seeing why components re-rendered, and showing how to fix them. That was absolutely enlightening!” – Elisabeth, Aug 2022


What you will learn in this workshop:

📈 Chrome and React DevTools
How to profile React apps with the Performance pane in Chrome DevTools, the React DevTools Profiler, and third-party tools like why-did-you-render.

🧑🏼‍🎨 Unnecessary Rerenders
How to ensure you’re not re-rendering the whole app every time anything changes (and how to refactor the code when you are).

🏃🏼‍♂️ Browser’s Render Loop
You click a button, and the browser rerenders the page. What happens during that process, and what can make it slow?

🌴 Huge Component Trees
How to reduce the cost of rerenders through memoization and virtualization.

🪙 Expensive Functions
How to optimize expensive render() or event listeners.

🗑️ Layout Thrashing
Why, sometimes, a browser decides to recalculate the whole page’s layout in the middle of a function – and how we can avoid it.

⛓️ Chains of Rerenders
In real-world apps, a single piece of code sometimes triggers multiple renders in a row. Let’s learn to notice, diagnose, and fix these cases

🧊 Bundle Init and Hydration
In React apps, bundle init and hydration is often the slowest part of an app’s startup. How can we optimize it?

🫡 State Management Anti-patterns
React Context and Redux are two of the most common ways to store state in React apps. How to avoid falling into their most common performance traps?

⚛️ React 18 Goodies
How React 18’s features like useTransition() and Server Components help to make apps faster.

Audience:

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.

Format:

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

Tools:

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.

Program:

January 16 – Unnecessary Renders (Mon, 11 a.m. – 3 p.m. GMT+2)

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.

January 17 – Expensive Renders (Tue, 11 a.m. – 3 p.m. GMT+2)

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.

January 19 – Chains of Rerenders and Layout Thrashing (Thu, 11 a.m. – 3 p.m. GMT+2)

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.

January 20 – Hydration (Fri, 11 a.m. – 2 p.m. GMT+2)

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.

Additional bonus days for members of Standard + 1 Bonus Day and Standard + 3 Bonus Days:

January 23 - Bonus Day Redux Optimizations (Mon, 11 a.m. – 1 p.m. GMT+2)

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.

January 24 - Bonus Day Bundle Init (Tue, 11 a.m. – 1 p.m. GMT+2)

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.

February 7 - Bonus Day Follow-Up & Live Debugging (Tue, 11 a.m. – 1 p.m. GMT+2)

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!




Speaker Ivan Akulov

Ivan is a Google Developer Expert, web performance consultant, and full-stack software engineer. His web performance experience has helped hot startups and Fortune 500 companies like Google, Framer, and Appsmith. He currently runs the web performance consulting agency [PerfPerfPerf]

Outside of work, enjoys exploring modern art, discovering lesser-known electronic and techno artists, and obsessing over serif typefaces.

Twitter

Info partners
Want to become an info sponsor?
Mail us to partners@fwdays.com and we will discuss our cooperation
Sign in
Or by mail
Sign in
Or by mail
Register with email
Register with email
Forgot password?