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.

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.

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!