React 19 - This has to stop!
Here are 3 big changes planned for React, and why I believe they might not be enough to keep the devs around.
For a bit of context, React was my go to frontend framework for the past 7 years thanks in part to the simple, cleaner approach it offered compared to the main alternative.
React Compiler
First on the list, the React Forget compiler is now production ready, and it will clearly improve both developer experience and app performance.
Why do we need a compiler? Well, on paper building UIs with React is extremely simple. Interfaces are a collection of components, which are plain functions that convert app state to DOM elements.
export function Awesome() {
const [videos, setVideos] = useState([]);
useEffect(() => {
fetchVideos().then((data) => setVideos(data));
}, []);
return (
<ul>
{videos.map((it) => (
<li key={it.id}>{it.name}</li>
))}
</ul>
);
}
Whenever the state changes, the update has to propagate in the DOM as well.
In practice however, things are way more complicated. React relies on complex mechanisms to understand when the state changes. These processes can be optimized at the expense of the developer who has to manually tune how “reactive” the library is.
The compiler will take this complexity out of our hands. This is great, but I can’t help but notice that we are only hiding the underlying issue, and not actually solving it. At the end of the day, React is built on top of a bloated and underperforming reactivity model, and there is little we can do about it.
Actions
Actions are the second big update we should talk about. They are already polarizing the community, and for good reason. In recent years, the React team was faced with a big dilemma. They were building a UI focused product, while the rest of the frontend space was shifting towards full stack solutions and server rendering.
The decision was to officially make React part of larger ecosystems, forcing a “UI-focused” library to pivot towards full-stack capabilities.
So you can now generate POST endpoints that run on the server with the “use server” directive, and then link them to forms in the UI via Server Actions.
async function requestUsername(formData) {
"use server";
const username = formData.get("username");
if (canRequest(username)) {
// ...
return "successful";
}
return "failed";
}
export function App() {
return (
<form action={requestUsername}>
<input type="text" name="username" />
<button type="submit">Request</button>
</form>
);
}
While this might be powerful, tightly coupling your layers when you can avoid it, is a decision usually reached after some mental gymnastics.
React Canary
Finally, it’s not all doom and gloom. React Canary will allow you to adopt individual new stable framework features as soon as their design is close to final. This proves that React is far from being obsolete, and that it enjoys a dedicated team of developers committed to constantly improve the framework.
However, efficient solutions are a must in modern web development, and I’m afraid React is failing to meet these requirements now more than ever. It is trying to keep up with the competition by adding complexity instead of removing it, and this is a big no no, at least in my book.
If you liked this article you can subscribe to my youtube channel to find out more about a pretty nice React alternative.
Until next time, thank you for reading!