Воркшоп: React Performance
Квитки на наступну конференцію Конференція JavaScript fwdays’24 вже у продажу!
Квитки на подію продано ❗
Прибуток від події ми перераховуємо на перевірені фонди гуманітарної допомоги України 🇺🇦
Опис воркшопу:
Воркшоп проходитиме 16, 17 та 19 травня з 11:00 до 15:00 (GMT+3).
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.
Here’s what you’ll learn in this workshop:
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.
How to ensure you’re not re-rendering the whole app every time anything changes (and how to refactor the code when you are).
You click a button, and the browser rerenders the page. What happens during that process, and what can make it slow?
How to reduce the cost of rerenders through memoization and virtualization.
How to optimize expensive render() or event listeners.
Why, sometimes, a browser decides to recalculate the whole page’s layout in the middle of a function – and how we can avoid it.
With server-side rendering, hydration is often the slowest part of an app’s startup. How can we optimize it?
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?
How React 18 improves performance by default, and how to make use of its new features for even faster apps.
Кількість учасників: до 30 учасників.
Подія пройде англійською мовою.
Воркшоп повністю пройде онлайн, використовуючи Zoom та різні онлайн-інструменти.
Аудиторія:
Mid-level or Senior: мають великий досвід роботи з React і добре знайомі з useMemo, useCallback і PureComponent/React.memo. Тим не менш, вони хотіли б ближче познайомитися з Chrome DevTools, React Profiler та іншими інструментами та підходами для діагностики та налагодження проблем із продуктивністю React.
Спікер Іван Акулов
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 seeing modern art, discovering lesser-known electronic and techno artists, and obsessing over serif typefaces.
Програма
16 травня — Unnecessary Renders (понеділок, з 11:00 до 15:00 GMT+3)
-
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!
17 травня — Expensive Renders & Chains of Rerenders (вівторок, з 11:00 до 15:00 GMT+3)
-
We’ll look at another two common React performance issues: expensive renders and chains of rerenders. 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 a couple new React 18 features.
19 травня — Layout Thrashing, Bundle Init, and Hydration (четвер, з 11:00 до 15:00 GMT+3)
-
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.
And how do we make the app load faster? While loading performance is a whole separate topic we’re not covering in this workshop, we’ll touch two React-specific things that make app load slower: bundle initialization and hydration time.