DEV Community

Cover image for React Compiler: Everything You Need to Know
Mohamed Jubair
Mohamed Jubair

Posted on

React Compiler: Everything You Need to Know

What if we could write React code without having to deal with memoization and issues with multiple re-renders. That’s what React 19, the upcoming major version of the widely used JavaScript library for creating user interfaces, promises to deliver. It aims to simplify the process of memoization and re-rendering by shifting to a compiler architecture. In this article, we will explore the reasons for having a compiler, and the challenges it addresses.

Introduction

In a recent blog post, the React team unveiled several exciting features expected to be released with React 19, including a React compiler alongside Actions, Directives, Document Metadata, and Asset Loading.

They have also mentioned that the new compiler is already powering instagram in production. And that they are working on releasing the first open source version of the compiler.

Let's begin by understading the fundamental principles of React.

React's Mental Model

React operates on a core principle: re-rendering of UI triggered by changes in application state. This allows developers to describe the desired end state of the UI, rather than implicitly writing step-by-step instructions on how to manipulate the DOM.

Behind the scenes, React employs a clever strategy called the virtual DOM. This in-memory representation of the UI then allows React to efficiently identify specific DOM elements requiring updates. Upon changes to the application state, React compares the virtual DOM with the actual DOM, pinpoints the minimal set of modifications needed, and precisely updates the real DOM.

But there is an issue here and that is React can re-render unnecessarily causing performance issues.

Unnecessary re-renders

While React's responsiveness is a strength, it can sometimes lead to excessive re-renders. This is because comparing complex data structures like objects and arrays in JavaScript can be computationally expensive. If a component creates a new object or array every time it renders, even if the content hasn't truly changed, it can trigger unnecessary re-renders in React.

To prevent this, developers need to intentionally optimize their components using memoization techniques, ensuring React only updates when the data truly differs.

What is memoization

Memoization in React is a performance optimization technique that involves storing and reusing the results of expensive computations or component output based on their input parameters. The primary goal is to prevent unnecessary re-rendering of components, thus improving the overall efficiency of a React application.

React provides various ways to memoize a component, and thus preventing it from re-rendering:

React.memo
is a higher order function that lets us skip re-rendering a component when its props are unchanged

const MemoizedComponent = React.memo((props) => {
    // Component logic here
});
Enter fullscreen mode Exit fullscreen mode

useMemo
is a React Hook that lets us cache the result of a calculation between re-renders.

const memoizedResult = useMemo(() => {
    // Expensive computation
}, [dependency1, dependency2]);
useCallback
Enter fullscreen mode Exit fullscreen mode

is a React Hook that lets us cache a function definition between re-renders.

const memoizedCallback = useCallback(() => {
   // Callback logic
}, [dependency1, dependency2]);
Enter fullscreen mode Exit fullscreen mode

Currently, developers need to use these APIs like useMemo, useCallback, and memo to manually control which parts of our apps re-render when data changes. This is a pain! It makes the code messy, prone to errors, and requires ongoing maintenance. This also diverges from the core principle of React's mental model. React now expects us to implicitly tell how to render the UI rather than declaratively rendering the UI based on the application state.

The need for a compiler

Traditionally, React uses a process called bundling to transform the JSX code into an optimized JavaScript files for the browser. The new compiler takes this concept a step further. It analyzes your code at a deeper level, understanding the structure and dependencies between components.

This allows React to automatically optimize re-rendering behaviors, without changing the mental modal of how developers work and think about React. This is why React team has invested in building an optimizing compiler for React - it helps React be smarter about updates.

One way to think about this is that React currently re-renders when object identity changes. With the new compiler, React re-renders when the semantic value changes — but without incurring the runtime cost of deep comparisons.

The Move towards React Compiler

The potential benefits of what the React compiler can offer are undeniable. As the project progresses, we can expect to see a significant shift in how React applications are built and optimized, leading to significant performance improvements, streamlined development experiences, and enhanced code maintainability.

it's a significant step forward for React's future. It's a testament to the ongoing efforts of the React team to continuously improve the framework and empower developers to create amazing user experiences.

Resources
React Labs: What We've Been Working On – February 2024 – React

React without memo - YouTube

Understanding Idiomatic React - YouTube

Top comments (9)

Collapse
 
fpaghar profile image
Fatemeh Paghar

🚀 With the React compiler, we can anticipate a paradigm shift in how React applications are built and optimized. The potential benefits include significant performance improvements, streamlined development experiences, and enhanced code maintainability. The move towards re-rendering based on semantic value rather than object identity marks a significant step forward for React's future.

Collapse
 
lundjrl profile image
James Robert Lund III

Adding to read later. Thanks for diving in!

Collapse
 
samuel_kelv profile image
Samuel Kelv

Wow, great update. That means we might have to do away with useMemo(), use callback() functions

Collapse
 
marcosmonterodev profile image
Marcos Montero

Without useMemo and useCallback, what is there left to ask in a React interview ? 😂

Collapse
 
thomashighbaugh profile image
Thomas Leon Highbaugh

If you have access to Codeium Chat (which you definitely do), or Google's AI Playground or whatever equally cringe name for the web interface for Gemini that allows file upload (zip your project and feed it as a zip file to Gemini 15 Pro, you are welcome) then there is pretty much no excuse for badly documented or not-optimized code you are pushing to your Git host of choice. Generative AI has taken out much of the "hard" work of polishing up your code and is getting better constantly, so use it or be left behind, the choice is yours.

This tool is awesome looking, we will see if it lives up to what it appears to be able to do, but its only one of many. No paradigm will shift if lazy developers keep watching Let's Play play throughs instead of doing work while at the office.

Collapse
 
efpage profile image
Eckehard

Is React going to be Svelte V2 ?

Collapse
 
mjubair profile image
Mohamed Jubair

In my opinion, react compiler is primaily a solution to optimize the rendering issues taking away the need to manually manage it.

But there is one main difference between the two which sets them apart is that in react we write HTML in Javascript whereas in Svelte we write javascript in HTML.

We can only wait and watch what the React team comes up with next.

Collapse
 
lotfijb profile image
Lotfi Jebali

insightful

Collapse
 
sudhirkumar1003 profile image
Sudhir Kumar

But without deep comparison, how react will know that wheather the array or object has been modified or not?