React Memoization and the Rise of the React Compiler

November 30, 2024 (3mo ago)

The greatest glory in living lies not in never falling, but in rising every time we fall

[— Anonymous]

Before We Start: Memoization vs. Memorization

Let’s make sure we don’t confuse memoization and memorization. While they sound similar, they mean very different things!

  • Memorization: This is when you commit information to memory, like when you study for a test. You remember facts or processes, which is helpful for retaining knowledge. Memorization has the letter “r” in it.

  • Memoization: This is a computing term with no “r”. It refers to an optimization technique used in programming to improve the performance of functions, especially ones that perform expensive calculations. When you memoize a function, you store the results of expensive function calls and reuse them when the same inputs occur again, saving time.

What is Memoization?

In simple terms, memoization is a technique where you save the results of function calls and reuse them when the same inputs are provided. This can be a huge performance booster, especially for functions that take a lot of time or resources to calculate (like complex mathematical computations or API calls).

If you're confused with the terms above (I am pretty sure you're), let's take a look at an example:

Let’s imagine you’re writing a weather app, and you’re using a library to calculate the chance of storm or whatever you name it. This calculation might involve querying a complex API or performing heavy computations, which could slow down your app if called multiple times.

Without memoization, your app might look something like this:

import { getChanceOfStorm } from 'some-lib';
 
function showWeatherReport() {
  let result = getChanceOfStorm(); // Some heavy calculations
  console.log('The chance of storm tomorrow is:', result);
}

Now, if you call this function multiple times (e.g., on different user actions or refreshing the weather report), the recalculation or API call happens again and again, even if nothing has changed. This can be inefficient and slow down your app.

for example:

showWeatherReport(); // First call, triggers the API call and do calculations
showWeatherReport(); // Second call, recalculates
showWeatherReport(); // Third call, recalculates

This is really unnecessary if those called functions return same result but we called it multiple times, because if you already know the result, you don't need to calculate it over and over!. So, this where memoization comes in handy.

Implementing Memoization

By using memoization, we can store the result of the expensive calculation the first time it's performed and simply return that result when the same inputs are used again. In practice, this looks like the following:

import { getChanceOfStorm } from 'some-lib';
 
let isCalculated = false;
let lastResult;
 
// We added this function to memoize the chance of storm calculation!
function memoizedGetChanceOfStorm() {
  if (isCalculated) {
    // No need to calculate it again, return the cached result.
    return lastResult;
  }
 
  // Gotta calculate it for the first time.
  let result = getChanceOfStorm();
 
  // Remember the result for the next time.
  lastResult = result;
  isCalculated = true;
 
  return result;
}
 
function showWeatherReport() {
  // Use the memoized function instead of the original function.
  let result = memoizedGetChanceOfStorm();
  console.log('The chance of storm tomorrow is:', result);
}

Now that we've established a clear understanding of memoization and how it helps optimize performance by storing the results of expensive function calls, let’s explore the exciting developments with the React Compiler (formerly known as React Forget).

Memoization in React Today

Now take a look at this:

// if Parent re-renders
const Parent = () => {
  // Child will also re-render
  return <Child />;
};

A lot of people currently believe that the Child component re-renders only if its props change (I read a great article about this) see here. In fact it's not, otherwise the Child component will re-render as same as Parent component does, and as React developers, we often face the challenge of unnecessary re-renders caused by changes in props or state. To optimize performance, we use tools like:

  • React.memo to prevent re-renders of functional components when their props haven’t changed.
  • useMemo to memoize computed values to avoid recalculating them unnecessarily.
  • useCallback to memoize functions and avoid triggering re-renders due to unstable function references.

These tools work well but can be a burden to manage, very hard, and some devs are hate to dealing with these hooks. Forgetting to use them or misusing them can lead to either performance issues or overly complicated code.

Take a look at this example:

import { memo } from 'react';
 
export default function Parent() {
  return <Child />;
}
 
//  Below is the memoized component
const Child = memo(() => {
  return <div>Child</div>;
});

In the above example, we memoize the Child component with adding extra syntax (React.memo), it seems simple but it will go crazy if your codebase contains thousand lines of code. But what if we want to memoize a function that is passed to the Weather component? We can use the useCallback hook to memoize the function and avoid recreating it on each re-render.

const Weather = () => {
  // use callback hook to memoize the function
  // and avoid recreates the function on each re-render
  const memoizedFunc = useCallback(() => {
    // some computations
  }, []); // dependency array that can be filled by reactive value
 
  return <WeatherCard weatherReport={memoizedFunc()} />;
};

Now the memoizedFunc will only be created once when Weather component is mounted and will be reused on each re-render. We can just pass the empty dependency array with reactive value to make memoizedFunc recreated and React will compare each dependency with its previous value using the Object.is comparison algorithm.

React Compiler: The Game Changer

The React Compiler promises to eliminate much of this mental overhead. It is designed to automatically handle memoization for us, meaning developers won’t have to explicitly write React.memo, useMemo, or useCallback in most cases.

Here’s what’s changing:

  1. Automatic Memoization The React Compiler will use static analysis to transform your React code during build time. It will automatically:
  • Memoize hook dependencies.
  • Memoize props passed to components.
  • Memoize components themselves to prevent unnecessary re-renders.

(I recommend you to see React Compiler video tutorial for more details) link

This effectively means every component you write will, by default, behave as though it’s wrapped in React.memo. Similarly, your hooks and props will behave as though they were passed through useMemo or useCallback.

  1. Simpler Code, Better Performance.

With this automation, React developers will no longer need to micromanage memoization. This can result in:

  • Cleaner, more maintainable code. (of course, as I myself really hate to messing up with react memoization hooks)

  • Improved performance by default, even for developers unfamiliar with memoization techniques.

At the time of writing this article, the React Compiler is still in public beta and not yet stable react-compiler-doc. I can't wait for the stable version to be released and to explore it further!🚀

LinkedIn
X