Workshop: React Performance
Buy tickets for the next conference JavaScript fwdays’24 conference!
Tickets for the event sold out ❗
We will transfer the funds to verified humanitarian aid foundations to Ukraine 🇺🇦
Workshop description:
The workshop will last for 3 days: on May 16, 17 and 19 at 11:00 a.m. till 3:00 p.m. (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.
The number of participants: up to 30 participants.
The event will be held in English.
Attendees will need: Zoom, Google Chome, Git, Node.js, Yarn, and their favorite editor installed.
Audience:
Mid-level or Senior: 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.
Speaker 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 seeing modern art, discovering lesser-known electronic and techno artists, and obsessing over serif typefaces.
Program
May 16 — Unnecessary Renders (Mon, 11 am – 3 pm 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!
May 17 — Expensive Renders & Chains of Rerenders (Tue, 11 am – 3 pm 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.
May 19 — Layout Thrashing, Bundle Init, and Hydration (Thu, 11 am – 3 pm 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.