React Conf 2024 was held a few weeks ago (part 1 and part 2), and many new features were discussed. I’ll be publishing articles on these features one by one. In this article, we’re going to take a look at one of the most exciting ones: the new React Compiler.

TL;DR

The React Compiler optimises applications by automatically memoizing your code. Unlike manual memoization with APIs like useMemo, useCallback, and React.memo, the compiler handles it for you, reducing the risk of inefficient updates. It identifies and memoizes values or groups of values within components and hooks, skipping over any that break the Rules of React.

In this article, we’ll explore useMemo, useCallback, and React.memo, and then demonstrate how the React Compiler works seamlessly without them. If you’re already familiar with these hooks, feel free to skip to the React Compiler section below. Otherwise, learning about these hooks first will help you fully understand the benefits of the React Compiler.

Before we dive in, let’s set up an app. We’ll use Next.js (version 15 RC at the time of writing) to demonstrate, as it allows us to utilize the React Compiler.

Setting up Next.js 15 RC

To set up Next.js 15 RC, we first need to install Next.js.

For this setup, I created a project named react-compiler and configured it as shown in the screenshot above.

Now, let’s install Next.js 15 RC. Go to your project folder (e.g., react-compiler) and run the following command:

yarn add next@rc react@rc react-dom@rc

This will install the necessary release candidate packages for Next.js, React, and React DOM. Once installed, the dependencies will be added to your package.json:

{
  "dependencies": {
    "next": "^15.0.0-rc.0",
    "react": "^19.0.0-rc-6f23540c7d-20240528",
    "react-dom": "^19.0.0-rc-6f23540c7d-20240528"
  }
}

To experiment with the React Compiler, we also need to install the Babel plugin:

yarn add babel-plugin-react-compiler

Alright, we have installed all the necessary packages.

To enable the React Compiler, we need to update the config file, but we will do that in a later section below.

Lastly, this step is optional for your own project, but for this demonstration, we’re using SASS, so let’s install it.

yarn add sass

Now, let’s run yarn dev to start the local server.

Github

You can find the repository with all the necessary code examples here: React Compiler Demo.

This repository contains everything you need to follow along with the examples in the article. If you have any questions, feel free to create an issue or message me on LinkedIn.

Fibonacci Sequence Calculator

This app finds a Fibonacci number from the given Fibonacci index. Overall, this app contains two separate parts which isn’t related each other.

The first one (the yellow box) is to find the Fibonacci number in the Fibonacci sequence at the given Fibonacci index from the input field. I intentionally made this app slow by not memoizing the algorithm. I just went with the recursive solution without memoization so it gives us the quadratic time complexity, O(n^2). With this slow app, I can demonstrate the memorization in React hooks.

If you want to find a detailed solution for the Fibonacci sequence algorithm with improved time complexity, please read this article.

❗️Warning: do not enter any Fib index bigger than 10; it will freeze your browser.

The second one (the pink box) is to update the theme mode between the light and dark modes. When you click on the checkbox for the enable dark theme, the theme mode will be changed.

Now, those two areas (yellow and pink boxes) should NOT be affecting each other as they are doing completely different tasks, however, the current code causes re-rendering not only itself but also the other part too.

Let’s take a look at the issues closer.

Issues

At the moment, there are three different places logging the message on re-rendering:

1. In `fib()` function in `Container` component

function fib(n) {
  console.log(`fib(${n}) function triggered`);
  if (n === 2) return 1;
  if (n === 1) return 0;
  return fib(n - 1) + fib(n - 2);
}

2. In `DarkThemeText` component

3. In `DarkThemeSelect` component

At the moment without any optimisation, every time when we enter different Fib index number in the input field, the fib() function will be called but also both DarkThemeText and DarkThemeSelect components are re-rendered.

This is happening the other way around too. When you change the theme mode by (un)tick the enable dark theme checkbox, the fib() function is unnecessarily triggered.

So how can we improve this so that the re-rendering is happening only when it is necessary?

React Optimisation

React itself is already quite performant by “minimising the number of costly DOM operations required to update the UI”. However, there are some scenarios that we can further improve the performance of our React app by making the renders more efficient (so taking less time to render) and also minimising the number of renders.

In this section, we are going to see 3 React optimising features that a lot of React engineers still don’t feel 100% comfortable using. At the end of this section, you will understand what they are and how we can use them to improve the performance of their React apps. Once we understand these concepts, it will be much easier to grasp the benefits that the React Compiler offers.

Those 3 features are:

useMemo: memoizes the result of a function (value), preventing expensive calculations on every render by recomputing only when dependencies change.
useCallback: returns a memoized version of a callback function, which is useful for preventing unnecessary re-renders when passing callbacks to optimized child components.
React.memo: is a higher-order component that memoizes a component, re-rendering it only when its props change, which helps improve performance by avoiding unnecessary re-renders.

First, let’s take a closer look at how we can use useMemo hook to improve our app.

useMemo

useMemo hook is used for memoizing a value. It takes in a function and an array of dependencies.

const memoizedValue = useMemo(() => slowFunction(a, b), [a, b]);

From the above code, useMemo returns the memoized value which is returned from the slowFunction when one of the dependencies changes during re-rendering. In the next re-rendering, if any value of the dependencies doesn’t get changed, useMemo just returns the memoized value instead of invoking the slowFunction again.

If no array of dependencies is provided, it invokes the slowFunction and memoize the new value on every render. If an empty array, [], is provided, it invokes only once on mount.

So where could we use useMemo in our code? If we look at the definition of useMemo again, it is used for memoizing a value so a good place to use the useMemo hook is to memoize the fib number.

Why?

As mentioned above, I didn’t memoize the value in the Fibonacci sequence algorithm itself in JavaScript so at the moment, running the algorithm is quite slow. On top of that, this slow algorithm is also executed unnecessarily every time when you switch the theme by (un)checking the enable dark theme checkbox.

To improve this, we can pass this slow and expensive function to useMemo hook and set the Fib index value from the input field as a dependency. By doing so, we don’t execute the fib() function unless Fib index value gets changed.

As enabling the dark mode by clicking on the checkbox won’t change the value of Fib index, the useMemo won’t invoke the fib() function but just returns the already memoized value.

Implementation of useMemo

First we will import useMemo.

import { useMemo } from 'react';

and declare fibValue with the useMemo hook with sending the fib(fibIndex) as a function and fibIndex as a dependency.

const fibValue = useMemo(() => fib(fibIndex), [fibIndex]);

So the expensive fib() function will only be invoked when the fibIndex value gets changed in the next render. If fibIndex doesn’t get changed, for example, when the checkbox for the theme mode is (un)ticked, it won’t invoke the fib() function but instead the fibValue will get assigned with the memoized value from useMemo.

Let’s use the fibValue.

Let’s test it out. Try to (un)tick the checkbox to enable the dark theme mode and check if the console.log inside fib()doesn’t get printed.

With useMemo, we can prevent calling the expensive function unnecessarily.

Now let’s enter the Fib value (note again do not add the input value bigger than 10, it will freeze your browser) in the input field and you will notice that both DarkThemeText and DarkThemeSelect components are still re-rendered as we saw above even though it shouldn’t because updating the fib value is nothing to do with updating the theme mode.

To improve this, this time we can memoize the component with React.memo.

Before we dive into it, it’s important to understand how React actually works so that we have a better idea of why we want to use React.memo. So I strongly recommend reading my previous article, how React works behind the scene.

React.memo

In my previous article, we saw how React works behind the scene and raised a question how we could improve the issue. The solution is to use React.memo.

React.memo is a higher order component and works only for the functional component (not working with the class based component if you happen to have it ).

It takes in a component and returns a memoized version of the component.

Let’s take a look at the syntax.

const MemoizedComponent = React.memo(myComponent);

So if the props in myComponent component isn’t changed, React will skip re-rendering the component and reuse the last rendered memoized component. The component should be re-evaluated only when the value of the props changed.

By default, React does the shallow comparison meaning it will only check if the top-level properties of objects have changed. If we want more control over the comparison, React.memo takes an optional second argument, a custom comparison function, which allows us to define how props should be compared.

Here is a quick example.

function areEqual(prevProps, nextProps) {
  return prevProps.value === nextProps.value;
}

const MemoizedComponent = React.memo(myComponent, areEqual);

In the above code, the function areEqual is a custom comparison function that checks if the value prop has changed between renders. If prevProps.value is equal to nextProps.value, the function returns true, indicating that the props have not changed, and MemoizedComponent will skip re-rendering. Otherwise, it returns false, and the component will re-render.

For our app, the good place to use this is both DarkThemeText and DarkThemeSelect component. Let’s update the code.

import { memo } from 'react';

// DarkThemeText.tsx
const DarkThemeText = memo(({ status }) => {
  ...
});

// DarkThemeSelect.tsx
const DarkThemeSelect = memo(({ darkTheme, callback }) => {
  ...
});

Now, let’s update the fib index. Notice that DarkThemeText no longer re-renders, but DarkThemeSelect is still re-rendering. Why is that?

Let’s take a closer look at what we are passing through props. For DarkThemeText, we are passing a status string, whereas DarkThemeSelect receives a darkTheme string and a callback function.

Before we proceed, we need to revisit an essential but crucial JavaScript operation: comparison.

function() !== function()

In JavaScript, functions are first-class objects, which means each function is treated as a unique object. Even if two functions have identical implementations, they are considered distinct objects. This distinction is crucial when comparing functions, as JavaScript does not compare their content but rather their references.

Let’s take a look at the example.

const function1 = () => {
  console.log('Hello, World!');
};

const function2 = () => {
  console.log('Hello, World!');
};

console.log(function1 === function2);

What do you think will be the output of the console log? Will it be true or false?

It will print false. Why is that?

It is because function1 and function2 are two separate functions, even though their implementations are identical. Since they are distinct objects, function1 === function2 evaluates to false.

Let’s take a look at another example.

function myFunction() {
  console.log('Hello, World!');
}

const function1 = myFunction;
const function2 = myFunction;

console.log(function1 === function2);

In this case, will it be true or false?

This time, it’s true because function1 and function2 both reference the same function myFunction. Since they point to the same location in the memory heap, function1 === function2 evaluates to true.

This behaviour is important to understand when working with props in React, especially when using memoization techniques like React.memo or hooks like useCallback which we will talk about in the next section. If a new function is created on every render, it will not be equal to the previous function, causing unnecessary re-renders.

DarkThemeSelect Component

Now, coming back to the DarkThemeSelect component:

// DarkThemeSelect.tsx
const DarkThemeSelect = memo(({ darkTheme, callback }) => {
  ...
});

Even though we are using React.memo, it will still re-render with the current setup in Container.tsx.

In Container.tsx:

We are sending a callback function, which causes a new function to be created every time Container re-renders because, as we saw in the function !== function section above, each new function is a unique object in JavaScript. This leads to DarkThemeSelect re-rendering as well.

To optimise this, we can use useCallback.

useCallback

useCallback is a hook that returns a memoized version of the callback function. This means that it will only create a new function if one of its dependencies has changed, preventing unnecessary re-renders of child components that depend on this callback.

const memoizedCallback = useCallback(myFunction, [dependencies]);

In our case, we pass a callback function as a prop to the DarkThemeSelect component. Without useCallback, a new function would be created on every render, causing DarkThemeSelect to re-render unnecessarily because the callback prop is always changing. This means that even if React.memo is used for DarkThemeSelect, it will always get re-rendered too.

By using useCallback, we ensure that the same function reference is passed unless its dependencies change, preventing these unnecessary re-renders and improving the performance of our application.

Let’s implement useCallback.

const handleDarkThemeSelect = useCallback(() => {
  if (pageRef.current) {
    pageRef.current.style.setProperty(
      '--body-background-color',
      darkTheme ? '#fff' : '#000'
    );
    pageRef.current.style.setProperty(
      '--body-font-color',
      darkTheme ? '#000' : '#fff'
    );
  }
  setDarkTheme(!darkTheme);
}, [darkTheme]);

In the code, useCallback is used to memoize the handleDarkThemeSelect function. The function toggles the theme by updating CSS custom properties on pageRef.current and then updates the darkTheme state.

And the dependency array [darkTheme] ensures that a new function is created only when darkTheme changes. This prevents unnecessary re-renders of components that depend on handleDarkThemeSelect.

We will send handleDarkThemeSelect as the callback prop of DarkThemeSelect.

Now let’s update the fib index, and awesome, no more re-rendering happens with DarkThemeSelect.

Great, we have optimized the app by implementing useMemo, useCallback, and React.memo, and it’s now performing better as it minimizes unnecessary re-renders.

So, it’s working well, but the React team is taking it a step further with the React Compiler. With the React Compiler, we don’t actually need to use these hooks because it will automatically handle memoization and optimization.

In the following sections, we will briefly discuss the Rules of React and how the React Compiler works. Then, I will demonstrate how the React Compiler magically optimizes re-rendering issues without the need for these hooks.

Rules of React

When working with React, it’s crucial to follow specific rules to ensure that your components behave as expected. The Rules of React help maintain the consistency and predictability of our application.

There are generally 3 main rule categories:

Each of these main categories contains more detailed rules, and it’s important to understand and follow them when building a React application. If you’ve been writing React code for some time, you’re likely already following these rules, either knowingly or unknowingly, as ESLint would have flagged any violations.

Based on the Rules of React, let’s take a look at what the React Compiler does for us.

React Compiler

The primary function of the React Compiler is to automatically memoize our code. As demonstrated earlier, we used useMemo, useCallback, and React.memo to achieve optimizations. Those hooks allowed us to specify that certain parts of the app do not need to recompute if their inputs remain unchanged.

However, correctly applying these optimizations has been challenging for many engineers, and when not applied properly, it can result in inefficient updates, as React ends up unnecessarily checking parts of the UI that haven’t changed.

The React Compiler, a build-time tool, adheres to the Rules of React to automatically memoize values. If it encounters parts of the code that do not follow these rules, it simply skips those sections and continues compiling the rest of the code.

For example, even when the status changes in DarkThemeText component, the React Compiler identifies that the return value can be reused, thus avoiding the need to recreate the JSX. It similarly optimizes DarkThemeSelect by managing changes to darkTheme and callback. This optimization extends to the Container component, which avoids re-rendering DarkThemeText and DarkThemeSelect when the fib input changes.

To explore the inner workings of the React Compiler and see it in action, check out the videos from React Conf 2024 for the React Compiler Deep Dive.

Enabling React Compiler

We now understand how the React Compiler magically optimizes our app, so let’s see it in action.

To enable the React Compiler feature in Next.js 15 RC, we need to add the experimental.reactCompiler option in next.config.js:

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

Once this feature is enabled, we can remove all instances of useMemo, useCallback, and React.memo from our app. And voila! Even without these hooks, unnecessary re-renderings no longer occur. Amazing!

In Conclusion

In essence, the React Compiler will handle all the optimization magic for us. However, it’s crucial to understand why we used hooks like useMemo, useCallback, and React.memo to optimize our app in the first place. This knowledge gives us a deeper understanding of what the React Compiler does for us. Additionally, for the React Compiler to function correctly, we need to follow the Rules of React, and I hope this article has well covered them.

I hope you enjoyed this article. If you want to learn more about the latest techniques in React and Next.js, don’t forget to subscribe to our newsletter below. Let’s also connect on LinkedIn to discuss more about React and Next.js.