Skip to main content

The React Performance Masterclass

Ivan Akulov
Your instructor
Ivan Akulov
Tickets
Get a ticket ↓

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

Workshop, 5×2h + Q&A Thu & Fri, July 28 – August 11 2022
09:00 – 11:30 AM PT (Pacific, US) (18:00 – 20:30 CET, Europe) 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

  • Practical insights

    From audits to resolving bottlenecks

  • Hands-on exercises

    With reviews by your teacher

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

Video Message From Ivan

A short introduction to the class by Ivan.

$350 .00 $450.00Register for this workshop →5 × 2h live sessions + Q&A. July 28 – August 11.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.


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).
  • 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.
  • 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?
  • 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.

$350 .00 $450.00Register for this workshop →5 × 2h live sessions + Q&A. July 28 – August 11.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.


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 has been digital-nomading since mid-2020. He 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, July 28, 10:00 – 12:30 PM PT (19:00 – 21:30 CET)
  • Fri, July 29, 10:00 – 12:30 PM PT (19:00 – 21:30 CET)
  • Thu, August 4, 10:00 – 12:30 PM PT (19:00 – 21:30 CET)
  • Fri, August 5, 10:00 – 12:30 PM PT (19:00 – 21:30 CET)
  • Thu, August 11, 10:00 – 12:30 PM PT (19:00 – 21: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 — Unnecessary Renders & Chains of Rerenders

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

9:00 AM – 11:00 AM
On the second day, we’ll continue optimizing unnecessary renders. We’ll also learn to recognize, profile, and optimize chains of rerenders, which happen when the app rerenders several times in a row instead of just once. This one is frequent in large single-page apps!

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

Day 3 — 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 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.

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

Day 4 — Layout Thrashing

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

9:00 AM – 11:00 AM
How does browser scheduling work? We’ll explore what goes into individual frames and learn what to do when browser’s rendering time goes out of control.

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

Day 5 — Bundle Init & 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 two React-specific things that make pages load slower: bundle initialization and hydration time.

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

$350 .00 $450.00Register for this workshop →5 × 2h live sessions + Q&A. July 28 – August 11.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.