React 19 Compiler & Automatic Memoization

Executive Summary

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

Status in Kemma: The React Compiler is currently enabled in the web-client project.

---

Current Project Status

• React Version: ^19.2.1 (✅ Compatible)
• Vite Config: Configured with babel-plugin-react-compiler inside @vitejs/plugin-react.
• Compiler Plugin: babel-plugin-react-compiler is installed as a development dependency.

Vite Configuration (apps/web-client/vite.config.ts)

The compiler is integrated into the React build plugin:

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

---

Impact on Development

1. Automatic Dependency Tracking

The compiler processes React code during the build step, automatically analyzing variable dependencies. You do not need to manually write useMemo or useCallback for standard variables and callback props to keep references stable.

2. Stable References for Child Components

Functions and object literals declared inside components are automatically stabilized. Passing these to child components wrapped in React.memo (like MindMapNodeComponent) will not trigger unnecessary re-renders.

3. Rules of React

Because the compiler relies on static analysis, it assumes code strictly follows the Rules of React (e.g., components must be pure, hook calls must be unconditional, state must not be directly mutated). Code that violates these rules will bypass the compiler's optimizations.

---

Guidelines for Kemma Developers

1. Avoid manual memoization for new code: You generally do not need to wrap new callbacks in useCallback or array/object derivations in useMemo.
2. Preserve existing Ref patterns where documented: Performance-critical areas like Studio.tsx still leverage handlersRef to bypass the rendering tree for high-frequency events (like drag or key presses) to guarantee O(1) performance.
3. Verify with React DevTools: You can open React DevTools (v5.0+) in development and verify that components show a "✨ Memoized by Compiler" badge.