---

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!