Using the compiler on < React 19

[gsathya]

tl;dr: _c is a hook for use by the React Compiler, don't use it directly. If you are unable to upgrade to React 19, please install react-compiler-runtime.

Overview

React Compiler automatically memoizes values, but does not use useMemo or useCallback. Since the compiler can memoize a lot more than was previously possible with manual memoization, the overhead of allocating the closure and dependency array for useMemo/useCallback can become sizable.

Instead, the compiler directly inlines the conditional check for the dependencies, caching the value and reusing the cached value if the dependencies are the same.

For example, instead of a useMemo call like this:

  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );

The compiler would generate code like this:

  const $ = _c(3);
  if ($[0] !== todos || $[1] !== tab) {
    t1 = filterTodos(todos, tab);
    $[0] = todos;
    $[1] = tab;
    $[2] = t2;
  } else {
    t1 = $[2];
  }

  const visibleTodos = t1

Notice the $ in the generated code, this $ is the array of cached values and it's dependencies. It is created by calling an internal React function (here, named _c). This "cache function" is unsafe to use and not part of the public API, and is only meant as a target for React Compiler specifically.

This API is included in React 19, but it is possible to provide a userspace implementation.

react-compiler-runtime

If you are unable to upgrade to React 19, you can install react-compiler-runtime, and add your React version target to your config. Acceptable values are '17' | '18' | '19' with 19 being the default.

Usage

The memo cache function exported by React should not be used directly, as we will make breaking changes to this API over time.

[JustSlone]

Note that this polyfill behaves slightly different than React's built-in implementation, and may not always retain cached values in the same circumstances. Where possible we recommend updating to React 19 and using the built-in version of this function.

Regarding this, would it be possible, reasonable, or worth it to re-create React's built-in implementation? Wouldn't expect it to be supported, but if we won't be able to update to R19 for bit, it might be worth investing in an improved polyfill.

[henryqdineen]

I see that there is a react-compiler-runtime package that lives in the react repo (link). Can we get some clarification on if that package is only meant to be used internally by the React team? If not, will it be published? It seems that some of the options in EnvironmentConfig depend on exports from that module.

[joemun]

@gsathya @poteto also wondering about this. Are there plans for publishing this package, in favor of the copy pasta of the gist? Thanks!

[poteto]

@joemun yeah we are going to publish this package soon, in the next couple of weeks hopefully

[blazejkustra]

@poteto I was wondering if the upcoming package will be similar to the shared gist or can we expect it to include additional features that would make it behave more similarly to the built-in implementation in React 19? This could be extremely beneficial for those who aren't ready to upgrade to React 19 yet, but want to opt-in to use the compiler. Thanks!

[poteto]

@blazejkustra yeah it's going to be something like this stack: facebook/react#31051 which is just a small change from the current gist. The idea with this package is that it would either defer to the official implementation of runtime APIs or it would provide a userspace approximation. Performance wise there may be subtle differences but behaviorally they will be on par.

[poteto]

Please note that you no longer need the previously linked gist, you can follow the docs on how to get the compiler to work with React <19.

[joemun]

Yep

target: '18'

[joemun]

Another potential issue... I'm no longer seeing the “Memo ✨” annotations in React Devtools. I did take a look at the transpiled output and it appears to be okay tho (ie. I'm seeing runtime _c logic).

[poteto]

@joemun hmm interesting, could you check your compiler version as well? I actually removed the runtimeModule option so I'm surprised that fixed it for you. I have an example React 18 vite app that works correctly, for reference.

Re: devtools, yeah that's a known issue that I'm looking into! The previous version of the polyfill had a FastRefresh bug, which we fixed recently. However that broke DevTools because it was assuming it was implemented in a specific way via state. I'll make a PR to fix that shortly

[joemun]

babel-plugin-react-compiler version: 0.0.0-experimental-57db2f6-20240926

-- edit: ahh need to run an update to the package lock file.

[joemun]

Update: I pinned to the latest explicit versions instead of just "experimental", and looks like it's working after all. Sorry for the thrash!

[poteto]

React 17 and 18 are now officially supported, so these workarounds are no longer needed. Please see our React Compiler Beta release post for more information.