React Compiler

How it works

React Compiler analyzes compatible component code and can apply memoization automatically. It belongs in the build pipeline. It does not validate business rules or make impure code correct. This lab demonstrates a separately pinned Babel compiler transform and runs the transformed component in the browser. The course does not enable the compiler across the Bhylu website or claim every optimization is faster. Begin with correct hook rules and pure rendering.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1. Run npm install then npm run compile, then npm run dev and open the local address Vite prints at /index.compiled.html for the compiled variant. React examples do not run in Bhylu’s current playground.

No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

• package.json
• index.html
• src/main.jsx
• src/style.css
• vite.config.mjs
• index.compiled.html
• compile.mjs

Example

import React, { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function ItemSummary({ names }) {
  const visible = names.filter((name) => name.includes('a'));
  return <p>{visible.join(', ')}</p>;
}
function App() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <button onClick={() => setCount((value) => value + 1)}>
        Review compiled view
      </button>
      <output>Reviews: {count}</output>
      <ItemSummary names={['Basket', 'Lamp', 'Stool']} />
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Expected result

The compiled lab keeps the same interaction and displays Basket, Lamp. Review increments without changing that result.

The supporting compile.mjs uses Babel’s React Compiler plugin targeted at React 19 and writes src/compiled.jsx. npm run compile performs that step; npm run dev:compiled then starts Vite using index.compiled.html, opened explicitly at /index.compiled.html. The normal entry remains available for comparison. The review checks that compiler output is generated and executes it, without claiming a benchmark or complete compiler coverage.

Supporting files for this lab

import fs from 'node:fs';
import { transformSync } from '@babel/core';
import compiler from 'babel-plugin-react-compiler';
const result = transformSync(fs.readFileSync('src/main.jsx', 'utf8'), {
  filename: 'src/main.jsx',
  plugins: [[compiler, { target: '19' }]],
  parserOpts: { plugins: ['jsx'] },
  configFile: false,
  babelrc: false,
});
fs.writeFileSync('src/compiled.jsx', result.code + '\n');
console.log('Compiler output written to src/compiled.jsx');