How React 19 Slowed Down the Web.
developrec
We're a leading contributor to the technology & software engineering community & an award-winning recruitment business.
Welcome back to our newsletter!
This edition will bring you the surprising story of how React 19 nearly brought the internet to a standstill.
- Yes, that statement is overly dramatic but it`s caused enough trouble to disturb the web.
Let's dive into the breaking news ??
the problem..
React remains the most popular and widely used UI framework, powering major websites like Netflix, Airbnb, and Meta's platforms (Facebook, Instagram, and WhatsApp). It supports user interfaces for billions of people, so it's clear that a large part of internet traffic relies on it.
Earlier this year, React 19 was announced, bringing exciting new features and developer experience improvements. However, a small change, overlooked until last week, could significantly degrade the performance of many websites that rely on React.
The issue with the React is that version 19 now disables parallel rendering of siblings within the same Suspense boundary. This change can potentially cause data fetching waterfalls for data fetched inside these sibling components, potentially slowing down website performance.
how did it slowed down the web!?
To understand the issue, let's quickly recap React's Suspense. Suspense is a React component that shows a fallback until its children component finish loading, either because they are being lazy loaded or using a Suspense-enabled data fetching mechanism.
Suspense has been a part of React’s API for quite some time. Its main approved use was for lazy loading components with React.lazy. This method is useful for splitting the code in your app and loading only the necessary parts. When a lazy-loaded component is first rendered, Suspense displays a temporary placeholder until the component's code is fetched, and then it shows the component.
We have been eagerly anticipating official support for client-side data fetching with Suspense, which currently works on the server with RSCs. In the meantime, several libraries, such as TanStack Query, have achieved this by delving into React's internals. As a result, many production applications are using Suspense for client-side data fetching.
领英推荐
what was the change in React 19?
This statement emphasises that achieving optimal performance and collocation for components and their data requirements is unrealistic without the assistance of a compiler. Relay serves this exact purpose by enabling such optimisation.
Here`s an example provided by Henrique Yuji:
function App() {
return (
<>
<Suspense fallback={"Loading..."}>
<ComponentThatFetchesData val={1} />
<ComponentThatFetchesData val={2} />
<ComponentThatFetchesData val={3} />
</Suspense>
</>
);
}
const ComponentThatFetchesData = ({ val }) => {
const result = fetchSomethingSuspense(val);
return <div>{result}</div>;
};
In this particular example in React 18, when fetchSomethingSuspense causes the first ComponentThatFetchesData to suspend, React continues to attempt to render its sibling components, subsequently triggering data fetching for each of them in parallel.
The changes introduced by this pull request (PR) will modify how React handles the rendering of components within the same Suspense boundary. Instead of attempting to render all siblings at once, React will now stop rendering as soon as it encounters the first component that requires data fetching and suspends.
A demo provided by Henrique Yuji for how the same code looks in React 19: https://stackblitz.com/edit/vitejs-vite-55rddj?file=src%2FApp.jsx
Subsequently, it will proceed to render each sibling only after the data for the preceding component has been fetched and it can be rendered. This altered behaviour will impact not only the usage of Suspense for data fetching, but also the use of React.lazy, which is an older and more widely adopted pattern.
key takeaways..
This brief story emphasises that achieving optimal performance and collocation for components and their data requirements is unrealistic without the assistance of a compiler. Relay serves this exact purpose by enabling such optimisation.
This breakdown has ended with a positive outcome. After significant public backlash, intense discussions, and likely extensive internal deliberations, the React team decided to postpone this change for now.