Refs required by react/19/remove-forward-ref #336

Activity

1. osamaqarem commented on Apr 25, 2025

   

   osamaqarem

   on Apr 25, 2025

   More actions

   It also doesn't add the new callback ref type, which is expected by libraries like React Hook Form.
   https://react.dev/reference/react-dom/components/common#ref-callback

   👍React with 👍1Reacted by Damjan Polugic
2. adamjcooper

   added a commit that references this issue on Jul 7, 2026

   Fix remove-forward-ref TypeScript output for React 19 (reactjs#336)

   ...

   3879a65
3. adamjcooper commented on Jul 7, 2026

   

   adamjcooper

   on Jul 7, 2026

   More actions

   I've opened #348 to fix this, along with the related problems in the TypeScript output:

   • The emitted ref prop is now ref?: React.Ref<T> instead of ref: React.RefObject<T>. Optional, and accepting callback refs (including React 19's cleanup-returning form, per @osamaqarem's comment above) as well as ref objects and null.
   • Union and intersection props/ref types are preserved instead of being silently dropped to an untyped destructure (e.g. forwardRef<HTMLButtonElement | HTMLAnchorElement, PropsWithChildren<Props>>).
   • Ref parameters annotated with a bare ForwardedRef<T> named import are now recognized too.

   I validated this against a ~90-file production migration that previously needed ~500 manual fixes after running this codemod.

   If you need this fix before a PR merges, you can run the fixed transform like so:

   git clone -b fix-remove-forward-ref-types https://github.com/adamjcooper/react-codemod.git /tmp/react-codemod

   npx jscodeshift@latest \
     -t /tmp/react-codemod/transforms/remove-forward-ref.ts \
     --parser=tsx \
     --extensions=tsx,ts \
     path/to/your/src

   Notes: --parser=tsx is required (the transform doesn't export a parser), add jsx,js to --extensions if you have untyped files, and run on a clean git tree. You can use --dry --print to show previews without writing.

   One heads-up: if your codebase has helper functions typed to accept the old ForwardedRef<T> (e.g. a custom useForwardedRef hook), you'll need to widen those to Ref<T> | undefined by hand afterwards. The call-site-based transformation can't know about them, but tsc will point you at each one.

   🎉React with 🎉1Reacted by Robin Clowers