Using the React Compiler in the Preact project

[ndt080]

Hello, people. I decide to create this discussion for developers, who want to setup the React Compiler in their Preact projects.
I haven't tested this in the project with @preact/signals, but it works successfull in a general project.

My dependencies:

{
  "dependencies": {
    "preact": "^10.25.4",
    "@preact/compat": "^18.3.1",
    "vite": "^6.0.7",
    "@preact/preset-vite": "^2.9.4",
    "react-compiler-runtime": "19.0.0-beta-e552027-20250112",
    "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112"
  }
}

Vite configuration

export default defineConfig({
  plugins: [
    preact({
      reactAliasesEnabled: true,
      include: ['**/*[jt]sx'],
      devToolsEnabled: true,
      babel: {
        plugins: [['babel-plugin-react-compiler', { target: '18' }]],
      },
    }),
  ],
  resolve: {
    alias: {
      'react/compiler-runtime': 'react-compiler-runtime',
      ...
    }
  },  
    ...
});    

Experience
I used the compiler in a heavy project. There are no problems, but the performance differs depending on the compiler's target parameter difference. I've got a grid with heavy rows and cells that uses virtualization. When I used the target 19, the performance was little bit lower when scrolling. I also had to add the "use no memo" directive in the component where I used cloneElement. It still works, but when using "use no memo" the performance is higher. I think these are not Preact problems, but the specifics of using the compiler in an non-general logic/components.

If you have used the compiler in a project with signals or you had a different experience, please describe it.