React 19 & the Game-Changing React Compiler

Optimising React for performance has been a struggle for many developers. It demands a deep understanding of memoization, how React re-renders work, and functional hooks like useMemo, useCallback, and React.memo. However, React 19 and the upcoming compiler are set to change this for the better, and I'm here to walk you through the massive improvements incoming.

What is the React Compiler?

The React Compiler, previously known as React Forget, is a tool designed to handle all performance memoization-related efficiencies automatically during build time. Imagine it as a utility that wraps your functions with useCallback, your computational expressions with useMemo, and your components with React.memo—but only if it determines that doing so will improve performance. This means you don’t need to manually use these hooks in your code; the compiler does it for you.

What is Memoization?

Memoization is an optimisation technique used to speed up applications by storing the results of expensive function calls and returning the cached result when the same inputs occur again. This ensures that functions do not need to recompute results unnecessarily, thereby improving performance. The process involves checking if the input (arguments or props in React) is the same as the last time the function was called. If they are, the function simply returns the cached result from the previous execution, saving time and computational resources.

Let's look at this in practice:

const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};        

Here, we have a function 'fibonacci' which calculates the nth Fibonacci number. However, this recursive implementation can become very slow for larger values of n due to repeated calculations of the same values. Each call to fibonacci(n) involves calling fibonacci(n-1) and fibonacci(n-2), leading to an exponential number of function calls and thus significant performance degradation.

Without memoization implemented, each time the fibonacci function is invoked, even if it's invoked with the same input multiple times, it will always recompute the result, leading to inefficient performance. This repeated calculation for the same inputs is what makes the function slow and resource-intensive.

// Calculating result, might take a while
console.log(fibonacci(35)); 

// Calculating result again, still slow
console.log(fibonacci(35)); 

// Calculating result, slow
console.log(fibonacci(36));         

Implementing Memoization

If we implement memoization to cache the results of the fibonacci function, it will not need to recalculate the results for the same inputs, leading to much improved performance:

const memoizedFibonacci = () => {
  const cache = {};
  return (n) => {
    if (cache[n]) {
      console.log('Fetching from cache');
      return cache[n];
    } else {
      console.log('Calculating result');
      if (n <= 1) return n;
      const result = memoizedFibonacci()(n - 1) + memoizedFibonacci()(n - 2);
      cache[n] = result;
      return result;
    }
  };
};

const fibonacci = memoizedFibonacci();

// Calculating result
console.log(fibonacci(35)); 

// Fetching from cache
console.log(fibonacci(35)); 

// Calculating result, partially using cache
console.log(fibonacci(36));         

In this memoized version of fibonacci, we use a cache object to store previously computed results. When the function is called, it first checks if the result for the given input is already in the cache. If it is, it returns the cached result. If not, it computes the result, stores it in the cache, and then returns it. This way, the function avoids unnecessary recomputations and significantly improves performance.

How React Determines Re-renders

In React, when a component’s props or state change, React triggers a re-render of that component. This can lead to performance issues if too many components down the tree have to re-render or if any of these components contain expensive computations. To mitigate this, developers traditionally use useMemo, useCallback, and React.memo to memoize components. These techniques ensure that React will only re-render components if their references (inputs) have changed, preventing unnecessary updates and improving performance.

• useMemo: This hook memoizes the result of a computation, recalculating it only when its dependencies change.
• useCallback: This hook memoizes a callback function, recreating it only when its dependencies change.
• React.memo: This higher-order component wraps functional components to memoize them, re-rendering only when their props change.

Using these hooks effectively can significantly enhance the performance of your React applications by reducing the number of unnecessary re-renders and optimizing the update process.

The Role of the React Compiler

The React Compiler takes memoization to the next level by automating these optimisations. It eliminates the need for developers to manually apply useMemo, useCallback and React.memo throughout the codebase, as the compiler intelligently analyses the code and applies memoization where necessary.

Looking at the example below, traditionally, you would use useMemo to memoize the filtered list of items, which will ensure that the list is only recalculated when the filter text or the items dependency change reference, thereby preventing unnecessary computations every time the component renders. We also use React.memo to memoize the ItemList component, which ensures it only re-renders when the props change.

// A component that renders a list of items
const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

// Memoizing the ItemList to prevent unnecessary re-renders
const MemoizedItemList = memo(ItemList);

const App = () => {
  const [filter, setFilter] = useState('');
  const [items] = useState([
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
  ]);

  // Memoizing the filtered items to prevent unnecessary computations
  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.toLowerCase().includes(filter.toLowerCase()));
  }, [filter, items]);

  return (
    <div>
      <input 
	      type="text" 
	      value={filter} 
	      onChange={(e) => setFilter(e.target.value)} 
	      placeholder="Filter items..." />
      <MemoizedItemList items={filteredItems} />
    </div>
  );
};

export default App;
        

However, by utilising the React Compiler, manual use of useMemo and React.memo becomes unnecessary because he compiler automatically analyses the code and applies memoization where needed, simplifying our code and reducing the need for boilerplate optimisations. This allows developers to focus more on the core logic and functionality of their applications.

Here’s the same component simplified with the React Compiler:

// A component that renders a list of items
const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const App = () => {
  const [filter, setFilter] = useState('');
  const [items] = useState([
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
  ]);

  const filteredItems = () => {
    return items.filter(item => item.name.toLowerCase().includes(filter.toLowerCase()));
  };

  return (
    <div>
      <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Filter items..." />
      <ItemList items={filteredItems()} />
    </div>
  );
};

export default App;        

Comparing the two approaches, you'll notice that in the traditional method, useMemo and memo are used. Whereas, with the React Compiler however, these optimisations are handled automatically. This means we can eliminate useMemo and React.memo from our code, making it cleaner and easier to maintain while still ensuring great performance.

Composition for Performance

Let’s look at another technique used to improve performance as this will help us understand the broader context of optimisation techniques in React and how the compiler further simplifies our job as developers.

One commonly used technique for optimising performance in React is composition. Composition involves structuring components to minimise unnecessary re-renders. By "moving state down" or "passing components as children," we can isolate state changes to specific parts of the component tree, preventing unrelated components from re-rendering.

Let’s look at an example to better understand this:

const Component = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>open dialog</Button>
      {isOpen && <ModalDialog />}
      <VerySlowComponent />
    </>
  );
};        

In the example above, the VerySlowComponent re-renders every time the dialog opens, causing a delay when the dialog appears. This happens because VerySlowComponent is part of the component tree affected by the state change.

Optimised with Composition:

const ButtonWithDialog = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>open dialog</Button>
      {isOpen && <ModalDialog />}
    </>
  );
};

const ParentComponent = () => {
  return (
    <>
      <ButtonWithDialog />
      <VerySlowComponent />
    </>
  );
};        

By encapsulating the state that controls the dialog within a separate ButtonWithDialog component, we ensure that the VerySlowComponent does not re-render when the dialog's state changes. This reduces unnecessary re-renders and improves performance.

Benefits of Composition

• Isolation of State Changes: By encapsulating state changes within specific components, we prevent unrelated components from re-rendering. This reduces the amount of work React needs to do, improving performance.
• Improved Code Readability: Structuring components in a compositional manner makes the code more modular and easier to understand. Each component has a clear responsibility, making it easier to maintain and debug.
• Enhanced Reusability: Components that manage their own state can be reused in different parts of the application without worrying about unintended re-renders. This promotes the creation of reusable, self-contained components.

With the advent of the React Compiler, these composition patterns will become less critical for performance optimisation because the compiler will automatically handle memoization and optimisation under the hood. This allows developers to focus more on the logic and structure of their components without worrying about performance implications.

However, I would still recommend using composition to keep the code clean and adhere to the separation of concerns principle. While it may not be necessary for performance purposes with the new compiler, it still promotes good coding practices and maintainability.

In short, the React Compiler automates the performance optimisations that developers used to have to do manually, making our lives easier and our codebases simpler.

TL:DR

Traditionally, developers have had to manually implement performance optimisation techniques such as memoization and component composition to improve the performance of their applications. This comes with several challenges:

• Steep Learning Curve for Junior Developers: Many junior developers are not adept at these optimisation techniques, which can lead to less performant code and a subpar user experience over time.
• Increased Risk of Bugs: The complexity of dependencies required in memoization hooks like useMemo and useCallback can introduce bugs, making the code harder to maintain.
• Distraction from Business Logic: Developers often get distracted by the need to think about performance optimisations instead of focusing on the core business logic of the application.
• Inconsistent Optimisations: It's easy to forget or incorrectly apply optimisations, leading to inefficient updates. The React Compiler automates this process, ensuring that optimisations are consistently and correctly applied across the codebase.

By automating memoization, the React Compiler offers numerous advantages:

• Simplified Codebase: Reduces the amount of boilerplate code required for performance optimisations.
• Consistent Performance: Ensures that all parts of the application are optimised uniformly, reducing the risk of performance bottlenecks.
• Developer Productivity: Frees developers from the need to manually manage performance, allowing them to focus more on writing business logic and adding value to the application.
• Reduced Bug Risk: Minimises the complexity of dependencies and reduces the likelihood of bugs related to memoization.

To get started using the experimental version of the React Compiler, follow the instruction here: https://react.dev/learn/react-compiler#usage-with-nextjs

Summary

The React Compiler is a significant advancement in the React ecosystem, automating performance optimisations that were traditionally handled manually by developers. This reduces complexity, minimises the risk of bugs, and allows developers to focus on core business logic and user experience. By ensuring consistent performance optimisations across applications, the React Compiler makes the development process more efficient and the codebase simpler to maintain. Ultimately, the React Compiler allows developers to focus on what truly matters: building great user experiences and implementing core business logic.