Can the React Compiler have any effect on Ink?

[yusifaliyevpro]

Hey, I’m using tsdown, which has native support for the React Compiler. My setup bundles a cli.js file that is normally about 2,700 lines long, but when I enable the React Compiler, it grows to 4,000 lines because of the compiler.

I’m curious whether the React Compiler’s automatic memoization has any effect on Ink. If I remember correctly, Ink repaints the entire screen each time, even when only one or two lines change.

import pluginBabel from "@rolldown/plugin-babel";
import { reactCompilerPreset } from "@vitejs/plugin-react";
import { defineConfig } from "tsdown";

export default defineConfig({
  plugins: [
    pluginBabel({
      presets: [reactCompilerPreset()],
    }),
  ],
  entry: ["src/cli.tsx"],
  format: "esm",
  outDir: "dist",
  clean: true,
  platform: "node",
  outputOptions: {
    entryFileNames: "cli.js",
    comments: false,
  },
});

const { waitUntilExit } = render(
  <App
    project={project}
    global={isGlobal}
    showAll={showAll}
    version={VERSION}
    installManager={installManager}
    onCopied={(cmds) => {
      copiedCommands = cmds;
    }}
    onEmpty={() => {
      wasEmpty = true;
    }}
  />,
  { exitOnCtrlC: false, alternateScreen: true },
);

[sindresorhus]

Yes, potentially. React Compiler can reduce React render work by memoizing compiled components, hooks, and values, allowing stable subtrees to avoid cascading re-renders when their relevant inputs are unchanged.

It does not make Ink write to the terminal at component granularity. Ink still recalculates layout and regenerates the complete root frame. In the default interactive mode, that frame is replaced when it changes. Set incrementalRendering: true to update only changed lines.

[yusifaliyevpro]

Thanks for the answer. I will try incrementalRendering.

I have already published a version using the React Compiler on npm. I noticed some improvements.

https://ripencli.vercel.app/