nextjs - 💡(How to fix) Fix Bug Report: React Compiler Only Auto-Memoizes Components on Root Page, Not on Other Routes [2 comments, 3 participants]

Link to the code that reproduces this issue

https://github.com/sanjaikumarv/next-js-compiler-issue

To Reproduce

1. Enable React Compiler in next.config.ts:

const nextConfig: NextConfig = {
  reactCompiler: true,
};

1. Create identical page components in multiple locations:

   • app/page.tsx (root page)
   • app/count/page.tsx (regular route)
   • app/(protected)/count/page.tsx (route group page)

2. All pages use the same child components (A, B, C) that log when they render

3. All pages use the same context provider for state management

4. Click the increment button to trigger state updates on each page

Current vs. Expected behavior

Current vs. Expected behavior

Current Behavior:

• Root page (app/page.tsx): Child components A, B, C do NOT re-render when parent state changes (React Compiler auto-memoizes them) ✅
• Regular route (app/count/page.tsx): Child components A, B, C DO re-render on every parent state change (React Compiler does NOT auto-memoize them) ❌
• Route group page (app/(protected)/count/page.tsx): Child components A, B, C DO re-render on every parent state change (React Compiler does NOT auto-memoize them) ❌

Expected Behavior: React Compiler should apply consistent optimization across all pages regardless of their location in the app directory structure. If it auto-memoizes components on the root page, it should do the same for all other routes (regular routes, nested routes, and route groups).

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10/11

Binaries:
  Node: 20.x.x (or your version)
  npm: 10.x.x
  Yarn: N/A
  pnpm: 9.x.x

Relevant Packages:
  next: 16.1.4
  react: 19.2.3
  react-dom: 19.2.3
  babel-plugin-react-compiler: 1.0.0
  typescript: 5.x.x

Next.js Config:
  output: N/A
  reactCompiler: true

Which area(s) are affected? (Select all that apply)

React

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

Bug Report: React Compiler Only Auto-Memoizes Components on Root Page, Not on Other Routes

To Reproduce

1. Enable React Compiler in next.config.ts:

const nextConfig: NextConfig = {
  reactCompiler: true,
};

1. Create identical page components in multiple locations:

   • app/page.tsx (root page)
   • app/count/page.tsx (regular route)
   • app/(protected)/count/page.tsx (route group page)

2. All pages use the same child components (A, B, C) that log when they render

3. All pages use the same context provider for state management

4. Click the increment button to trigger state updates on each page

Current vs. Expected behavior

Current Behavior:

• Root page (app/page.tsx): Child components A, B, C do NOT re-render when parent state changes (React Compiler auto-memoizes them) ✅
• Regular route (app/count/page.tsx): Child components A, B, C DO re-render on every parent state change (React Compiler does NOT auto-memoize them) ❌
• Route group page (app/(protected)/count/page.tsx): Child components A, B, C DO re-render on every parent state change (React Compiler does NOT auto-memoize them) ❌

Expected Behavior: React Compiler should apply consistent optimization across all pages regardless of their location in the app directory structure. If it auto-memoizes components on the root page, it should do the same for all other routes (regular routes, nested routes, and route groups).

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10/11

Binaries:
  Node: 20.x.x (or your version)
  npm: 10.x.x
  Yarn: N/A
  pnpm: 9.x.x

Relevant Packages:
  next: 16.1.4
  react: 19.2.3
  react-dom: 19.2.3
  babel-plugin-react-compiler: 1.0.0
  typescript: 5.x.x

Next.js Config:
  output: N/A
  reactCompiler: true

Which area(s) are affected? (Select all that apply)

• App Router
• React Compiler (experimental)
• Pages Router
• Turbopack
• Other (please specify)

Which stage(s) are affected? (Select all that apply)

• next dev (local)
• next build (local)
• next start (local)
• Vercel (Deployed)
• Other (please specify)

Additional context

Code Examples

Root Page (app/page.tsx) - Components DON'T re-render:

"use client";

import A from "@/src/components/test/A";
import B from "@/src/components/test/B";
import C from "@/src/components/test/C";
import { useStateContext } from "@/src/components/test/context/state-context";

export default function Home() {
  const { state, setState } = useStateContext();
  return (
    <div className='flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black'>
      Hii
      <button onClick={() => setState(state + 1)}>Increment</button>
      {state}
      <A />
      <B />
      <C />
    </div>
  );
}

Regular Route Page (app/count/page.tsx) - Components DO re-render:

"use client";

import A from "@/src/components/test/A";
import B from "@/src/components/test/B";
import C from "@/src/components/test/C";
import { useStateContext } from "@/src/components/test/context/state-context";

export default function page() {
  const { state, setState } = useStateContext();
  return (
    <div className='flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black'>
      Hii
      <button onClick={() => setState(state + 1)}>Increment</button>
      {state}
      <A />
      <B />
      <C />
    </div>
  );
}

Route Group Page (app/(protected)/count/page.tsx) - Components DO re-render:

"use client";

import A from "@/src/components/test/A";
import B from "@/src/components/test/B";
import C from "@/src/components/test/C";
import { useStateContext } from "@/src/components/test/context/state-context";

export default function page() {
  const { state, setState } = useStateContext();
  return (
    <div className='flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black'>
      Hii
      <button onClick={() => setState(state + 1)}>Increment</button>
      {state}
      <A />
      <B />
      <C />
    </div>
  );
}

Child Component Example (src/components/test/A.tsx):

import React from "react";

export default function A() {
  console.log("A rendered");
  return <div>A</div>;
}

Context Provider (src/components/test/context/state-context.tsx):

"use client";

import { createContext, useContext, useState } from "react";

const StateContext = createContext<any>({});
export const useStateContext = () => useContext(StateContext);

export function StateProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState(1);
  return (
    <StateContext.Provider value={{ state, setState }}>
      {children}
    </StateContext.Provider>
  );
}

Root Layout (app/layout.tsx):

import { StateProvider } from "@/src/components/test/context/state-context";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang='en'>
      <body>
        <StateProvider>{children}</StateProvider>
      </body>
    </html>
  );
}

Console Output Comparison

Root page (/) - After clicking increment 3 times:

A rendered  // Only on initial mount
B rendered  // Only on initial mount
C rendered  // Only on initial mount
// No additional renders when clicking increment

Regular route (/count) - After clicking increment 3 times:

A rendered  // Initial mount
B rendered  // Initial mount
C rendered  // Initial mount
A rendered  // Click 1
B rendered  // Click 1
C rendered  // Click 1
A rendered  // Click 2
B rendered  // Click 2
C rendered  // Click 2
A rendered  // Click 3
B rendered  // Click 3
C rendered  // Click 3

Route group page (/(protected)/count) - After clicking increment 3 times:

A rendered  // Initial mount
B rendered  // Initial mount
C rendered  // Initial mount
A rendered  // Click 1
B rendered  // Click 1
C rendered  // Click 1
A rendered  // Click 2
B rendered  // Click 2
C rendered  // Click 2
A rendered  // Click 3
B rendered  // Click 3
C rendered  // Click 3

Impact

This inconsistency makes it difficult to:

1. Rely on React Compiler for predictable performance optimization
2. Understand when components will be auto-memoized
3. Build consistent performance patterns across the application
4. Trust the experimental React Compiler feature in production

Workaround

Manually wrapping components with React.memo() provides consistent behavior across all routes, but defeats the purpose of the React Compiler's automatic optimization.

Notes

• All pages are identical in structure and code
• All use the same context provider
• All are client components ("use client")
• The only difference is the file location: React Compiler ONLY optimizes the root page (app/page.tsx), but NOT any other routes
• This affects both regular routes (app/count/page.tsx) and route groups (app/(protected)/count/page.tsx)
• Disabling reactCompiler makes all pages behave consistently (all re-render all components)