A New Era for React.js: The Introduction of a Compiler

Reactions to React’s Latest Update

A few days ago, a shocking new blog post from the React.js team dropped, and 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. In today’s video, we’ll find out what that word means.

The Rise of Version 4.0: Adieu, jQuery

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 frontend 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, however, 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.

The Simplification of React Code

Developing React code is pretty ridiculous compared to frameworks like Vue or Svelte. For example, when we have some state that needs to be computed into another value, in React, that value will be unnecessarily recomputed every time the component re-renders. To address this, React provides a hook called useMemo, which memoizes the computation and only runs when the state it depends on changes, explicitly put in an array.

On the other hand, Vue and Svelte offer more simplified approaches without the need for a dependency array or additional wrapper functions. This is because they have a compiler that looks at your code in advance to figure out reactivity and bundle it into the final product that goes to the browser.

The Removal of Bad Features

With the introduction of a compiler in React, features like useMemo and useCallback are becoming obsolete. These features, although useful in their own right, add unnecessary complexity to React code and clutter the mental space of developers.

Another feature that will no longer be needed in the future is forwardRef, which creates a higher-order component to expose a DOM node to the parent. Instead, ref will be just a prop for easier access without additional wrapper functions.

Revolutionizing Data Submission Cycle

React’s server actions, similar to those in Next.js, handle the data submission cycle for you from client to server and back. Hooks like useFormStatus and useFormState simplify data handling in forms, while hooks like useOptimistic provide an ultra-fast experience akin to Firebase on any backend database.

However, working with promises in React has always been a pain point. With React server components in Next.js, you can use async/await to fetch data directly in a component. While this functionality is not yet available in client-side components in React 19, the use hook provides a workaround that works on both promises and React context.

The Future of React

With these major improvements in React, the framework is evolving to be on par with other leading frameworks, as all major frameworks are starting to look identical with nearly identical APIs. It may be time for us, as a society, to decide on the one true framework and build it into the browser to put an end to this ongoing battle.

These developments mark a new era for React.js, where developers can expect a simplified coding experience and improved performance. While React may have had its flaws in the past, the introduction of a compiler is a significant step towards fixing them. The future of React looks brighter than ever.

Thank you for reading the Code Report, and stay tuned for more updates on the world of web development.