React Compiler and other changes in React (film, 4 minutes)
A few days ago, the React.js team dropped a shocking new blog post that sparked a wave of excitement. As a self-proclaimed React hater, it’s hard not to acknowledge the significant improvements they have made that will enhance the developer experience dramatically. The React team has introduced a game-changing compiler that is set to shift how developers write code. Just when many thought React had become the new jQuery, and that the JavaScript framework wars were settling down, this new initiative brings a new hope. Alongside this, jQuery recently announced version 4.0, shedding unnecessary features and dropping support for IE11—a positive move for legacy systems still utilizing jQuery.
The introduction of a compiler to React.js is indeed groundbreaking. Meta has already integrated this compiler into Instagram, leading to expected performance boosts while simplifying the code developers need to write. Compared to frameworks like Vue, Svelte, and Solid, React code has often been viewed as overly complex. For instance, in React, when managing state that depends on computed values, the code can become inefficient as these values are recalculated on every re-render. The React hook, useMemo, is currently employed to tackle this by memoizing its computations, thus preventing unnecessary recalculations.
With React 19, many outdated features are being phased out. The anticipated removal of hooks like useMemo and useCallback is a significant move, as it strips away the mental overhead of deciding whether to memoize or not. This adjustment also fuels the conspiracy theory that React intentionally complicates API design to later champion themselves as innovators when they simplify. Additionally, the forward ref feature will no longer be required. The ref will directly serve as a prop, allowing for more straightforward access to the DOM without wrapping it in extra functions, providing a clearer and cleaner approach.
Moreover, new functionalities like server actions transform the developer experience, allowing for a similar feel to PHP without the extravagant context. React will manage data submission cycles effectively, easing the process for developers. The introduction of hooks like useFormStatus will streamline data management in forms even further. As a nice touch, React now allows async/await usage in server components, making data fetching more direct than ever, although this restriction still applies to client components where the use hook becomes essential.
In conclusion, these advancements signify substantial improvements for React, indicating a promising future for the framework. Interestingly, as all major frameworks start to converge in their features and abstractions, it raises the question of whether we need a single, standardized framework moving forward. As of writing this article, the video had 1,134,865 views and 48,504 likes, showcasing the growing interest in these new developments in React.
Toggle timeline summary
-
Introduction to a new blog post from the React.js team.
-
React team makes significant updates to improve developer experience.
-
React introduces a new compiler.
-
jQuery announces version 4.0 after years of anticipation.
-
Meta implements the new React compiler in production.
-
Comparison of current React inefficiencies with other frameworks.
-
Explaining the useMemo hook for performance optimization.
-
React's new compiler will streamline coding practices.
-
Removal of forward ref feature to simplify props access.
-
Introduction of server actions in React.
-
Dynamic UI updates using optimistic data handling.
-
New use hook to handle promises and context in React.
-
Improvements in handling asynchronous code.
-
Observations on framework similarities in the industry.
-
Call for a unified framework to end framework wars.
-
Closing remarks and thanks for viewing.
Transcription
A few days ago, a shocking new blog post from the React.js team dropped. As a React hater, I hate to say it, but they fixed React. I tried to let the hate flow through me, but the React team made some brilliant moves that will dramatically improve the developer experience. Just when you thought React had become the new jQuery, and the JavaScript framework wars were coming to an end, the React team has unleashed their secret weapon, a compiler. And in today's video, we'll find out what that word means. It is February 26, 2024, and you're watching The Code Report. Speaking of jQuery, one thing that you may have missed is that after nearly a decade of anticipation, jQuery just announced version 4.0. It got rid of a bunch of stuff made obsolete by the JavaScript language itself, dropped IE11 support, and migrated to ES modules. Most front-end developers nowadays are too smug and arrogant to use jQuery, but this is great news for the millions of websites out there that still use it. The big news, though, is that React.js is getting a compiler. Meta is already using this compiler in production to power Instagram, and will likely bring solid performance improvements, but most importantly, it will simplify the code we write as developers. Currently, React code is pretty ridiculous compared to frameworks like Vue, Svelte, and Solid. Like, imagine we have some state that needs to be computed into another value. We can do it like this in React, but that value will be unnecessarily recomputed every time the component re-renders. It's inefficient. To address this, React provides a hook called useMemo. Memo means memoization, which itself means remember. It wraps the computation in another function, which will only run when the state that it's dependent on changes, which has to be explicitly put in this array. If we look at all the other frameworks, though, they don't do stuff like this. Like, in Vue, we have this computed function, but there's no need to include that dependency array. And in Svelte 3, it's even more simple with the $ syntax, although it's being replaced with a rune in Svelte 5. The reason these frameworks can let you write more simplified code is because they have a compiler, unlike React, which is purely runtime-based. They look at your code in advance to figure out where the reactivity is and bundle that into the final product that goes to the browser. But now that React is getting its own compiler, it means hooks like useMemo and useCallback are a thing of the past. And that's huge because not only is the code ugly as hell, but it also removes the mental boilerplate of asking the question, to memoize or not to memoize. And they confirmed my conspiracy theory that React intentionally adds bad APIs like this just to look like geniuses when they remove them later on. But useMemo is not the only bad feature going away. Another thing you won't need in the future is forward ref, which creates a higher order component when you need to expose a DOM node to the parent. Instead, ref will just be a prop so you can easily access it without having to wrap another function. That's an easy win, but a more controversial feature is server actions. You can already use actions in Next.js, and many have described the developer experience as being like PHP, but without Lambos. The general idea, though, is that React handles the data submission cycle for you from client to server and then back again. What's cool about this is React provides hooks like useFormStatus or useFormState to easily handle the data in a form, but then alongside that, you have hooks like useOptimistic to get that ultra-fast Firebase-like feel on any backend database. The UI updates instantly based on the expected change, then in the rare case it fails, it reverts back. But another thing that sucks about React is working with promises. In React server components like in Next.js, you can use async await to fetch data directly in a component. That's awesome, but you can't do it in a client-side component. And you still can't in React 19, but you can use the use hook, which is the next best thing. It works on both promises and React context, which means it makes the useContext hook obsolete. Because unlike useContext, use can also be used inside of loops and conditionals. But using use allows you to use the value of a resolved promise directly in the UI. Now, a promise is asynchronous and its value is initially pending, so you can handle the loading state by wrapping it in a suspense boundary. And it might also reject and throw an error, in which case you can wrap it in an error boundary. I don't really love this code myself, but it's way better than the common approach of resolving a promise with the useEffect hook. Bottom line is that these are some huge improvements for React. What's funny, though, is that if we take a step back, all the major frameworks are starting to look identical. And have all copied each other's abstractions, leading to nearly identical APIs, just with things named slightly different. As a civilized society, it's about time we decide on the one true framework. Angular. Then we build that framework into the browser to put an end to this bloodshed once and for all. This has been the Code Report. Thanks for watching, and I will see you in the next JS one.