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
});

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

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

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

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