There’s a lot of tools and talks about loading performance – but what if every time you click a button in your app, the 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 runtime React performance issues to give your app a speed boost.
“The format of the workshop is great. We get to actually hear the thought process behind the debugging and profiling, why we chose one technique or the other. We get to reflect on the choices and discuss them live.” – Vyacheslav, May 2022
“I really liked just watching over Ivan’s shoulder while he did the analysis. Ivan kept things really simple – no sophisticated, expensive tooling, just patiently analyzing the profiles we were taking, seeing why components re-rendered, and showing how to fix them. That was absolutely enlightening!” – Elisabeth, Aug 2022
What you will learn in this workshop:
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.
The workshop will last for 4 days: on January 16, 17, 19 and 20. Also additional bonus days for Standard + 1 Bonus Day and Standard + 3 Bonus Days ticket members: on January 23, 24 and on February 7 (GMT+2).
Zoom + Slack. The workshop will take place in Zoom. We’ll also create a shared Slack channel for long-term link sharing.
Exercises. In the end of each session, we’ll split into groups to do exercises. For exercises, please bring a laptop with Chrome, React DevTools, Git, Node.js, Yarn, and your favorite IDE installed.
January 16 – Unnecessary Renders (Mon, 11 a.m. – 3 p.m. GMT+2)
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.
January 17 – Expensive Renders (Tue, 11 a.m. – 3 p.m. GMT+2)
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.
January 19 – Chains of Rerenders and Layout Thrashing (Thu, 11 a.m. – 3 p.m. GMT+2)
On the third day, we’ll learn to recognize, profile, and optimize chains of rerenders, which happen when some code triggers several renders in a row. This one is frequent in large single-page apps! We’ll also explore what happens every time the browser renders a new frame on the screen–learn what to do when browser’s CSS/layout costs get out of control.
January 20 – Hydration (Fri, 11 a.m. – 2 p.m. GMT+2)
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 a very React-specific loading performance issue: hydration time of server-rendered apps. Expect to see
Additional bonus days for members of Standard + 1 Bonus Day and Standard + 3 Bonus Days:
January 23 - Bonus Day Redux Optimizations (Mon, 11 a.m. – 1 p.m. GMT+2)
Not everyone uses Redux. But if you do, chances are Redux is making your app slower. During this bonus day, we’ll explore a few Redux performance antipatterns. We’ll also learn multiple ways to fix them, ranging from writing better selectors to making architectural changes.
January 24 - Bonus Day Bundle Init (Tue, 11 a.m. – 1 p.m. GMT+2)
Most advice about bundles focuses on making them smaller. However, bundles take time not only to download, but also to execute. And on low-end devices (such as inexpensive Android phones), execution time might be even longer than loading time. So, let’s explore profiling and optimizing bundles in webpack apps.
February 7 - Bonus Day Follow-Up & Live Debugging (Tue, 11 a.m. – 1 p.m. GMT+2)
Attended the workshop, tried optimizing your React app, and have some questions now? This is the right place for them. Two weeks after the workshop ends, we’ll meet again to answer any questions you might have after trying the workshop advice in practice. And don’t forget to bring your apps for some live debugging!
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, enjoys exploring modern art, discovering lesser-known electronic and techno artists, and obsessing over serif typefaces.