React Refresh Bug affecting NextJS when using useClient

[Biki-das]

Link to the code that reproduces this issue

https://github.com/Biki-das/nextjs-refresh-bug

To Reproduce

The parent component must be a client component and the child as well, to reproduce the bug.

when Editing a JSX component which is client side(this is important as server components don't suffer from the same and react refresh works fine), if we try to move from a normal React component to a memo Wrapped component, or to a forwardRef wrapped, we cannot see any component rendered, but rather an error Uncaught TypeError: Component is not a function

this seems to be an issue with React refresh since if we try to reload the page, the component renders fine without any issue.

if we start with a code like below

import { forwardRef, memo } from "react";

export function Component() {
   return <h1>This is a component</h1>;
}

and then edit it to

export const Component = memo(function Test() {
  return <h1>This is a memo component</h1>;
});

the error comes up

React version: 18.2.0

Steps To Reproduce

CodesandBoxLink

1. Visit the Sandbox URL
2. try editing the Component File
3. the initial render is of a normal Component
4. comment out the Normal component and uncomment the Memo wrapped component
5. it does not render instead if you check the console you would see an error
6. try commenting the Memo out and then check the ForwardRef, the same thing happens

Link to code example:
CodesandBoxLink

if the codeSandBox is not able to reproduce the same due to some reason, try cloning the below repository
https://github.com/Biki-das/nextjs-refresh-bug

The current behavior

Screen.Recording.2025-01-06.at.10.41.53.PM.mov

The expected behavior

React refresh should have work and the component should have rendered.

Current vs. Expected behavior

React refresh should have work and the component should have rendered.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:00:32 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 11
Binaries:
  Node: 22.10.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.1.3 // Latest available version is detected (15.1.3).
  eslint-config-next: 15.1.3
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.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), next build (local), next start (local)

Additional context

this bug is related to react refresh and an issue has been raised facebook/react#30659
and the fixes have also been raised facebook/react#30660

Note
Mostly the issue is more towards client components.

[Biki-das]

cc @ztanner @timneutkens

[Biki-das]

@samcx this issue has been fixed and once Nextjs rebases with the new React releases this changes would be there!