Explore: React Compiler compatibility

[sor4chi]

React has released a tool called React Compiler from v19, which mechanically does the writing on React component and handler’s memorization on the compiler side, which until now has been done manually by the user, and it is still in beta but is now available.

Therefore, we investigate whether Hono JSX, which claims to be compatible with React, can make good use of React Compiler, and if so, we set up this Issue in the name of investigation to see if we can adopt it.

The repository used for reproduction is here.

I thought seeing the App component transpile was important, so I Split Chunked it so that only the App code is in a separate chunk in React.

Hono JSX's bundle of App

import {
  c as createContext,
  j as jsxDEV,
  u as useState,
  F as Fragment,
} from "./client-CZuCaV1b.js";
new TextEncoder();
const inIsland = Symbol();
const inChildren = Symbol();
createContext({
  [inIsland]: false,
  [inChildren]: false,
});
const $empty = Symbol.for("react.memo_cache_sentinel");
function _c(size) {
  return useState(() => {
    const $ = new Array(size);
    for (let ii = 0; ii < size; ii++) {
      $[ii] = $empty;
    }
    $[$empty] = true;
    return $;
  })[0];
}
const Child = (props) => {
  const $ = _c(2);
  console.log("render Child");
  let t0;
  if ($[0] !== props.handleClick) {
    t0 = /* @__PURE__ */ jsxDEV("button", {
      onClick: props.handleClick,
      children: "Child",
    });
    $[0] = props.handleClick;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
};
const AppOriginal = function () {
  const $ = _c(10);
  console.log("render App");
  const [count, setCount] = useState(0);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = () => {
      console.log("click");
    };
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  const handleClick = t0;
  let t1;
  if ($[1] !== count) {
    t1 = /* @__PURE__ */ jsxDEV("p", {
      children: ["Counter: ", count],
    });
    $[1] = count;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  let t2;
  if ($[3] !== setCount || $[4] !== count) {
    t2 = /* @__PURE__ */ jsxDEV("button", {
      onClick: () => setCount(count + 1),
      children: "Increment count",
    });
    $[3] = setCount;
    $[4] = count;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  let t3;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = /* @__PURE__ */ jsxDEV(Child, {
      handleClick,
    });
    $[6] = t3;
  } else {
    t3 = $[6];
  }
  let t4;
  if ($[7] !== t1 || $[8] !== t2) {
    t4 = /* @__PURE__ */ jsxDEV(Fragment, {
      children: [t1, t2, t3],
    });
    $[7] = t1;
    $[8] = t2;
    $[9] = t4;
  } else {
    t4 = $[9];
  }
  return t4;
};
const WrappedApp = function (props) {
  const $ = _c(2);
  let t0;
  if ($[0] !== props) {
    t0 = /* @__PURE__ */ jsxDEV(AppOriginal, {
      ...props,
    });
    $[0] = props;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
};
const __importing_islands = true;
export { __importing_islands, WrappedApp as default };

React's bundle of App

import { r as reactExports, j as jsxRuntimeExports } from "./index-B-3PU4Hn.js";
var compilerRuntime = { exports: {} };
var reactCompilerRuntime_production = {};
/**
 * @license React
 * react-compiler-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var ReactSharedInternals =
  reactExports.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
reactCompilerRuntime_production.c = function (size) {
  return ReactSharedInternals.H.useMemoCache(size);
};
{
  compilerRuntime.exports = reactCompilerRuntime_production;
}
var compilerRuntimeExports = compilerRuntime.exports;
const Child = (props) => {
  const $ = compilerRuntimeExports.c(2);
  console.log("render Child");
  let t0;
  if ($[0] !== props.handleClick) {
    t0 = /* @__PURE__ */ jsxRuntimeExports.jsx("button", {
      onClick: props.handleClick,
      children: "Child",
    });
    $[0] = props.handleClick;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
};
function App() {
  const $ = compilerRuntimeExports.c(8);
  console.log("render App");
  const [count, setCount] = reactExports.useState(0);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = () => {
      console.log("click");
    };
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  const handleClick = t0;
  let t1;
  let t2;
  if ($[1] !== count) {
    t1 = /* @__PURE__ */ jsxRuntimeExports.jsxs("p", {
      children: ["Counter: ", count],
    });
    t2 = /* @__PURE__ */ jsxRuntimeExports.jsx("button", {
      onClick: () => setCount(count + 1),
      children: "Increment count",
    });
    $[1] = count;
    $[2] = t1;
    $[3] = t2;
  } else {
    t1 = $[2];
    t2 = $[3];
  }
  let t3;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = /* @__PURE__ */ jsxRuntimeExports.jsx(Child, { handleClick });
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  let t4;
  if ($[5] !== t1 || $[6] !== t2) {
    t4 = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
      children: [t1, t2, t3],
    });
    $[5] = t1;
    $[6] = t2;
    $[7] = t4;
  } else {
    t4 = $[7];
  }
  return t4;
}
export { App as default };

It did not work in my environment.
However, the ReactCompiler transpile operation itself is working well and the output bundle is almost identical.

My guess is that the differential rendering process at rendering time is different from React.

related: #2959

[usualoma]

@sor4chi
Super thanks!
I was able to verify this using your verification repository. I think #3045 will give the expected result once merged. (In my environment, child elements are no longer recalculated.)

[sor4chi]

Hi, @usualoma .
Thank you so much!
I was surprised because it was too instantaneous. It was a fantastic job!

[sor4chi]

Thanks to usualoma, the conversation we had the other day about whether the React Compiler could work with Hono JSX seems to be going well.
I think we need to do some additional testing, but we might be able to ship it in some form.
cc: @yusukebe

[yusukebe]

I think we need to do some additional testing, but we might be able to ship it in some form.

Sound good! How about you work on it after merging #3045 into the next? It will be merged soon.

[yusukebe]

@sor4chi

I've merged the fix into the next. You can write your tests based on the next branch.

[sor4chi]

Thanks, I can confirm that it works properly in my environment too!

The fact that you can use the React Compiler as is, we can promote that you are compatible with React, right?

[yusukebe]

The fact that you can use the React Compiler as is, we can promote that you are compatible with React, right?

yes!