In this talk, I’d like to reflect on the performance changes React went through in the past years – and hypothesize about where we’re going. Key points:React reached maturity and can now push frontend forward without reinventing the same primitives (like how all frameworks were stuck reinventing vdom for the past 10 years)Performance (past): consistent performance push you didn’t even notice (componentDidMount → useEffect and how that avoids layout thrashing; React 18 update batching). Some stuff didn’t really work out (Prepack)Performance (current): features that are available, but we need to change our habits to adopt them: startTransition (needs a habit to separate interactions into urgent and non-urgent), RSC + Server Actions (needs new patterns and approaches to data loading etc) Performance (future): React Offscreen API, React ForgetPerformance (further future, subjective opinion) – where React and other frameworks are moving: intelligent progressive enhancement, with zero JS on the client unless necessaryWhat didn’t work out:Why we can’t put frameworks into workers (answer: latency, data copying, etc.)Why react didn’t go the svelte route (inlining js instead of a single bundle)Why react didn’t go the aggressive-code-splitting-and-chunks-on-demand route

In a few months, Google will DESTROY your React app......well, kinda. In March, Google is releasing a new Core Web Vital called Interaction to Next Paint (INP). It measures the speed of interactions – and every React site Ivan has seen so far had INP way in red. This is bad for any site that cares about SEO.In this talk, let’s learn how to prepare for the new Core Web Vital: how INP works, and how to improve it – both manually and with new React APIs like useTransition() and React Concurrency.

This talk comes with bad news. Google has launched a new metric – INP – which measures how fast page interactions are. This metric becomes a Core Web Vital in Mar 2024 – and pretty much every React app Ivan has seen so far has this metric way in red.
The good news is React 18 shipped new features that help to solve this – notably, useTransition() and Suspense. And in this talk, we’ll look at how exactly these features work, what they do, and how we can use them to make INP green.

React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

Ever loaded a font from the Google Fonts CDN? Or added the loading=lazy attribute onto an image? These optimizations are recommended all over the web – but, sometimes, they make your app not faster but slower.
In this talk, Ivan will show when some common performance optimizations backfire – and what we need to do to avoid that.