Воркшоп: React Performance

Практичний онлайн-воркшоп від Івана Акулова, який поділиться власний досвідом, як прискорити React apps.
Подія відбулась
Воркшоп: React Performance
Воркшоп: React Performance
Подія відбулась
Подія відбулась
Подія відбулась

Квитки на наступну конференцію Конференція JavaScript fwdays’24 вже у продажу!

Опис воркшопу:

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

Про що ви дізнаєтесь на цьому воркшопі:

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

⛓️ Chains of Rerenders
In real-world apps, a single piece of code sometimes triggers multiple renders in a row. Let’s learn to notice, diagnose, and fix these cases

🧊 Bundle Init and Hydration
In React apps, bundle init and 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’s features like useTransition() and Server Components help to make apps faster.


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.

Формат проведення:

Загальний воркшоп триватиме 4 дні: 16, 17, 19 та 20 січня. Також є додаткові бонусні дні: 23, 24 січня та 7 лютого для учасників Standard + 1 Bonus Day та Standard + 3 Bonus Days (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.


16 січня – Unnecessary Renders (понеділок, з 11:00 до 15:00 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.

17 січня – Expensive Renders (вівторок, з 11:00 до 15:00 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.

19 січня – Chains of Rerenders and Layout Thrashing (четвер, з 11:00 до 15:00 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.

20 січня – Hydration (п'ятниця, з 11:00 до 14:00 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 , React Server Components, and more.

Додаткові бонусні дні для учасників Standard + 1 Bonus Day та Standard + 3 Bonus Days квитка:

23 січня - Bonus Day Redux Optimizations (понеділок, з 11:00 до 13:00 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.

24 січня - Bonus Day Bundle Init (вівторок, з 11:00 до 13:00 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.

7 лютого - Bonus Day Follow-Up & Live Debugging (вівторок, з 11:00 до 13:00 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.


Інфо партнери
Хочете стати інфопартнером?
Напишіть нам на partners@fwdays.com та ми запропонуємо вам варіанти інфопарнерства
Або поштою
Або поштою
Реєстрація через e-mail
Реєстрація через e-mail
Забули пароль?