Skip to main content

The React Performance Masterclass

Ivan Akulov

Your instructor
Ivan Akulov

Workshop includes:

  • 🔖  Examples to take away
  • 🗣  Active participation
  • 🎁  Workshop recordings
  • 🏅  Smashing Certificate

Unfortunately, this workshop is fully sold out! But you can join the waiting list in case a ticket becomes available:


Workshop, 5×2h + Q&A Thu & Fri, June 29 – July 13 2023
09:00 – 11:30 AM PT 18:00 – 20:30 CET Check your time zone

There’s a lot of tools and talks about loading performance – but what if every time you click any button, your 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 React performance issues to give your app a speed boost.


Here’s What You Should Be Expecting:

  • Interactive live sessions

    5 × 2.5h live sessions

  • Hands-on exercises

    With reviews by your teacher

  • Cheatsheets

    For every React performance issue

  • Life-time access

    To all video recordings and examples

  • Dedicated Q&A time

    To ask all your questions

  • Smashing Certificate

    A well-deserved reward for your work


We’ll be looking at a lot of React patterns that could harm performance — and ways to fix them — and learn more about tools and best practices that are bound to make your app faster.

We’ll take a slow app and, step-by-step:

  1. profile every performance issue using Chrome DevTools and React Profiler,
  2. diagnose what’s causing that slowness,
  3. and fix the performance issue straight in the code.

What Will You 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).
  • Huge Component Trees
    How to reduce the cost of rerenders through memoization and virtualization.
  • Expensive Functions
    How to optimize expensive render() or event listeners.
  • Hydration
    With server-side rendering, 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?
  • Real-World Apps
    How to debug complex real-world apps, where one interaction may be affected by several issues at the same time.
  • React 18 Goodies
    How React 18 improves performance by default, and how to make use of its new features for even faster apps.

Who Is This For?

For 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.


What Do You Need To Bring?

You will need a laptop with Chrome, React DevTools, Git, Yarn, and your favorite IDE installed.

About 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, Ivan enjoys exploring modern art, discovering lesser-known electronic and techno artists, and obsessing over serif typefaces.

Time & Schedule

This workshop is split over five days. Our virtual doors open at 8:45, we start at 9:00 AM PT.

The workshop sessions will run on the following days:

  • Thu, June 29, 9:00 – 11:30 PM PT (18:00 – 20:30 CET)
  • Fri, June 30, 9:00 – 11:30 PM PT (18:00 – 20:30 CET)
  • Thu, July 6, 9:00 – 11:30 PM PT (18:00 – 20:30 CET)
  • Fri, July 7, 9:00 – 11:30 PM PT (18:00 – 20:30 CET)
  • Thu, July 13, 9:00 – 11:30 PM PT (18:00 – 20:30 CET)

Day 1 — Unnecessary Renders

8:45 AM PT
Virtual doors open, registration, chat, and introduce yourself.

9:00 AM – 11:00 AM
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. Expect to see a bunch of Redux and context optimizations!

11:00 AM – 11:30 AM
Q&A with Ivan on the day’s material. Chat with each other.

Day 2 — Expensive Renders

8:45 AM PT
Virtual doors open, registration, chat, and what was most useful yesterday.

9:00 AM – 11:00 AM
We’ll look at another common React performance issue: an expensive render. We’ll see how techniques like virtualization help to deal with large costly trees. We’ll also take a look at React 18’s startTransition.

11:00 AM – 11:30 AM
Q&A with Ivan on the day’s material. Chat with each other.

Day 3 — Chains of Rerenders

8:45 AM PT
Virtual doors open, registration, chat, and what was most useful yesterday.

9:00 AM – 11:00 AM
We’ll learn to recognize, profile, and optimize chains of rerenders, which happen when the app rerenders several times in a row instead of just once. We’ll also take a stab at debugging a real large open-source app.

11:00 AM – 11:30 AM
Q&A with Ivan on the day’s material. Chat with each other.

Day 4 — Hydration

8:45 AM PT
Virtual doors open, registration, chat, and what was most useful yesterday.

9:00 AM – 11:00 AM
How do we make the app load faster? 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 one React-specific thing that makes pages load slower: React hydration.

11:00 AM – 11:30 AM
Q&A with Ivan on the day’s material. Chat with each other.

Day 5 — Let’s get practical!

8:45 AM PT
Virtual doors open, registration, chat, and what was most useful yesterday.

9:00 AM – 11:00 AM
The last session will be a 100% practical day with exercises. We’ll split up in group and we’ll be optimizing React Apps together.

11:00 AM – 11:30 AM
Q&A with Ivan on the day’s material. Saying goodbye!


Unfortunately, this workshop is fully sold out! But you can join the waiting list in case a ticket becomes available:


x