Skip to main content

The React Performance Masterclass

Ivan Akulov
On the web
iamakulov.com
On Twitter
@iamakulov
Tickets
Get a ticket

Workshop includes:
  • Working examples to take away
  • Docs with all the info you’ll be learning
  • Interactive sessions
  • Workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:


Workshop, 5×2h + Q&A Thu & Fri, May 20 – June 4 2021
09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)

React apps struggle both from loading performance and runtime performance issues. 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 performance problems to give your React app a speed boost.


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. Home assignments will allow you to practice by using a good set of base templates.

We’ll also learn how to tackle each React performance problem in 3 steps:

  1. Reproduce the problem.
  2. Diagnose the kind of issue we’re dealing with with the help of Chrome DevTools.
  3. Resolve the problem based on the kind of issue.

$450 .00 Register for this workshop → Five × 2.5h live sessions + Q&A. May 20 – June 4.
With all video recordings & slides. Get a ticket.

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


What Will You Learn In This Workshop?

  • Hydration
    With server-side rendering, hydration is often the slowest part of an app’s startup. How can we optimize it?
  • 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).
  • Third Parties
    Their effect on Total Blocking Time and Time to Interactive and how to minimize it.
  • 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.
  • Chrome and React DevTools
    How to profile React apps with the Performance pane in Chrome DevTools and the React DevTools Profiler.
  • Performance Regressions
    How to keep the app fast once you’ve optimized it.

Who Is This For?

If you already have experience with React and want to learn more about its loading and runtime performance, this workshop is for you.

$450 .00 Register for this workshop → Five × 2.5h live sessions + Q&A. May 20 – June 4.
With all video recordings & slides. Get a ticket.

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


What Do You Need To Bring?

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

About Ivan Akulov

Ivan is a Google Developer Expert, full-stack software engineer and web performance consultant. He has worked for clients like Google, Framer, and Hugo, and currently runs the web performance consulting agency PerfPerfPerf.

In his spare time Ivan enjoys discovering rare French electronic artists.

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, May 20, 09:00 – 11:30 AM PT
  • Fri, May 21, 09:00 – 11:30 AM PT
  • Thu, May 27, 09:00 – 11:30 AM PT
  • Fri, May 28, 09:00 – 11:30 AM PT
  • Fri, June 4, 09:00 – 11:30 AM PT

Day 1 — Loading Perf: Hydration

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 React hydration. We’ll use Chrome DevTools and React DevTools to profile it – and learn how to use partial hydration to optimize it (or avoid hydration at all). We’ll also take a quick look at React Server Components.

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

Day 2 — Loading Perf: Chains Of Rerenders & Third Parties

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 frequent loading performance issue – chains of rerenders – and learn how to profile and optimize it. We’ll also see how third parties affect your TBT and TTI – and how to make them faster without hurting the business. (Did you know that sometimes, delaying a third-party script makes your Lighthouse score worse?)

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

Day 3 — Runtime Perf: Frames, Long Tasks & Huge Component Trees

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, why you – in the perfect world – shouldn’t run more than 10 ms of JS at a time, and how high-FPS screens (such as iPad Pro) shrink this budget even further.

And how do we keep the app fast once it’s loaded? We’ll see how rerendering too many components frequently pushes apps out of this 10 ms budget. We’ll also learn to profile and optimize these unnecessary rerenders. Keywords: memoization, virtualization, prop invalidation.

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

Day 4 — Runtime Perf: Expensive Functions & Layout Thrashing

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

9:00 AM – 11:00 AM
Two other runtime perf offenders are expensive functions (render() functions or event listeners) and layout thrashing. We’ll explore various refactors that help us to fight these issues: memoizing and moving computations around, throttling event listeners, deferring expensive work with requestAnimationFrame()/requestIdleCallback(), and more.

And – were you missing CSS? Because we’ll also learn a couple of less-known CSS hacks here.

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

Day 5 — Avoiding Performance Regressions & Live Debugging

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

9:00 AM – 11:00 AM
Ever seen an app get optimized but then gradually become slower and slower again over the next months? On the final day, we’ll explore how to avoid regressing into slowness once you’re done with optimizations. We’ll also do some live debugging of sites you will suggest!

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


Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below: