React 19 Compiler & Deprecation of Manual Memoization

Executive Summary

React 19 introduces the React Compiler (formerly known as React Forget), which automatically handles memoization in your React components. When enabled, this compiler eliminates the need for manual performance optimizations using useMemo and useCallback.

Applicability to Kemma: While the project is currently running React 19.2.1, the React Compiler is not currently enabled. Therefore, you cannot yet safely remove useCallback or useMemo without potentially causing performance regressions or breaking referential stability.

---

How the React Compiler Works

The React Compiler processes your React code during the build step. It deeply understands Javascript and React rules to automatically memoize values and functions within your components.

• Automatic Dependency Tracking: You no longer need to manually manage dependency arrays ([]). The compiler handles this.
• Stable References: It ensures objects and functions have stable identity across renders unless their actual data dependencies change. This replaces the need for useCallback to keep event handlers stable or useMemo to keep objects stable.
• Fine-grained Updates: It optimizes rendering at a more granular level than React.memo, often skipping unnecessary work even within a component.

Current Project Status

I analyzed the apps/web-client configuration:

• React Version: ^19.2.1 (✅ Compatible)
• Vite Config: Standard @vitejs/plugin-react setup.
• Compiler Plugin: babel-plugin-react-compiler is missing from package.json and vite.config.ts.

Because the compiler plugin is not installed, your React 19 application works like a standard React application. useCallback and useMemo are still required to prevent re-renders and maintain stable references for child components (especially those using React.memo).

Can we remove useCallback now?

No.

If you remove useCallback now, specifically in performance-critical areas like Studio.tsx:

1. Broken Referential Equality: Functions passed to child components (like MindMapNodeComponent) will be re-created on every render.
2. Performance Regression: This will bypass React.memo optimizations in child components, causing the "keystroke cascade" issue where the entire graph re-renders on every keystroke.

Recommendation: How to Enable the Compiler

To benefit from automatic memoization and remove useCallback, you must explicitly enable the compiler.

1. Install Dependencies

npm install babel-plugin-react-compiler eslint-plugin-react-compiler --save-dev

2. Configure Vite (vite.config.ts)

Update your vite.config.ts to add the babel plugin to the React plugin configuration:

// apps/web-client/vite.config.ts
const ReactCompilerConfig = {
  /* config options if needed */
}

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
      },
    }),
    // ... other plugins
  ],
  // ...
})

3. Configure ESLint

Add the compiler's ESLint plugin to catch code that violates the "Rules of React" (which the compiler relies on).

4. Verification

Once set up, you can use React DevTools (v5.0+) to verify components are being "Memoized by React Compiler".

Conclusion

You are one step away! The foundation (React 19) is there, but the "magic" (the Compiler) needs to be installed. Do not remove useCallback until the compiler is successfully installed and verified.