Client component not re-rendering after imported upper case function changes

[tmota900]

Link to the code that reproduces this issue

https://github.com/tmota900/client-component-hmr-no-re-render

To Reproduce

1. Run the dev server, open the app's main page
2. Change the FunctionTest return value
3. Validate that the server component re-rendered, the client one didn't.

Current vs. Expected behavior

When I update the function return value, I was expecting it to re-render all the components using it. Atm, when saving, HMR kicks in but doesn't trigger the client component re-render, showing the outdated version of the return until the page is refreshed.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Wed Jul 31 20:48:52 PDT 2024; root:xnu-10063.141.1.700.5~1/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 7.33.7
Relevant Packages:
  next: 15.4.2-canary.32 // Latest available version is detected (15.4.2-canary.32).
  eslint-config-next: N/A
  react: 19.1.1
  react-dom: 19.1.1
  typescript: 5.9.2
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local)

Additional context

I tested this in the latest 3 major versions of next (15,14,13) and none seemed to re-render the client component. I went to do a sanity check on a react application and client components do re-render if a function being used by them changes.

EDIT:

The issue seems to only happen when the used function is defined in upper case.

[PuppyOne]

Hi everyone,


Root Cause Confirmation

I've identified the core issue lies in React Refresh's component detection logic. The problematic line is in react-refresh-runtime.development.js:


return typeof name === 'string' && /^[A-Z]/.test(name);

(This matches uppercase-starting string)


What's happening

This heuristic assumes any uppercase-starting function is a React component. While this convention holds for components, it incorrectly classifies utility functions like FunctionTest() as components. This causes:


1. Incorrect HMR handling: Utility changes trigger component-level refresh instead of module-level invalidation
2. Update propagation failure: Client components depending on these utilities don't re-render
3. Server/client mismatch: Server components refresh while client components appear "stale"
   

Quick Validation

To confirm this is the culprit:

1. In repo client-component-hmr-no-re-render
2. Open node_modules\next\dist\compiled\react-refresh\cjs\react-refresh-runtime.development.js (or a similar directory)
3. Find isLikelyComponentType() (line 621 (approx))
4. Temporarily add these 2 lines:

           var name = type.name || type.displayName;
+
+          if (name === 'FunctionTest')
+            return false // Selectively ignore `FunctionTest`
+
           return typeof name === 'string' && /^[A-Z]/.test(name);

5. Restart dev server and verify if client components now update correctly when utility functions change

Notes:

• This is a diagnostic change only - not a permanent solution
  

Solution Pathways

I'm still seeking a solution, and currently exploring the following directions:


1. next.js Handling
   Special handling for /^[A-Z]/ in Next.js
   
2. react-refresh Enhancement
   Heuristic improvements in react-refresh


Will open a PR once I have a concrete, tested proposal.