Skip to content

Conversation

@reyronald
Copy link

@reyronald reyronald commented Jan 8, 2026

The original implementation in #34027 added useForm from react-hook-form to the known incompatible libraries list, but missed useFormContext. useFormContext returns the same API surface as useForm, including the watch() function that cannot be memoized safely.

This PR adds useFormContext with the same configuration as useForm

I repurposed @Maxou44 's original repro repo from react-hook-form/react-hook-form#11910 to demonstrate that the issue can be reproduced with useFormContext too, you can play around with the updated demo if you want to confirm, repo link below

https://github.com/reyronald/issue-react-compiler-react-hook-form

Repro details
import {
  useForm,
  useWatch,
  useFormContext,
  FormProvider,
} from "react-hook-form";

export default function App() {
  const methods = useForm();
  const { register, handleSubmit, watch, control } = methods;
  const onSubmit = (data) => console.log(data);

  const test = useWatch({ control, name: "test" });

  return (
    <div>
      <Headers description="Performant, flexible and extensible forms with easy-to-use validation." />

      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <input {...register("test")} placeholder="Test field" />

          <div>useForm.watch is {watch("test")}</div>

          <div>useForm.useWatch value is {test}</div>

          <Component />

          <input type="submit" />
        </form>
      </FormProvider>
    </div>
  );
}

function Component() {
  const { watch, control } = useFormContext();

  const test = useWatch({ control, name: "test" });

  return (
    <>
      <div>useFormContext.watch is {watch("test")}</div>

      <div>useForm.useWatch value is {test}</div>
    </>
  );
}
image

References

  1. issue: Watch don't work with React Compiler (React 19) react-hook-form/react-hook-form#11910
  2. [compiler] Detect known incompatible libraries #34027
  3. [compiler]: add @tanstack/react-virtual to known incompatible libraries #34493

The original implementation in facebook#34027 added useForm from react-hook-form
to the known incompatible libraries list, but missed useFormContext.
useFormContext returns the same API surface as useForm, including the
watch() function that cannot be memoized safely.

This PR adds useFormContext with the same configuration as useForm

I repurposed @Maxou44 's original repro repo from facebook#11910 to demonstrate
that the issue can be reproduced with useFormContext too, you can play
around with the updated demo if you want to confirm, repo link below

https://github.com/reyronald/issue-react-compiler-react-hook-form
@meta-cla meta-cla bot added the CLA Signed label Jan 8, 2026
@Maxou44
Copy link

Maxou44 commented Jan 8, 2026

Can you try using the beta 8.0.0 of React Hook Form ?

@reyronald
Copy link
Author

Can you try using the beta 8.0.0 of React Hook Form ?

@Maxou44 Issue cannot be reproduced in 8.0.0-beta.0

$  npm ls react-hook-form
└── react-hook-form@8.0.0-beta.0
image

However, it doesn't seem like the linter takes into account the version of the library, just its name, so it's worth adding regardless, thoughts?

@Maxou44
Copy link

Maxou44 commented Jan 8, 2026

I don't have any issues using 8.0.0, I don't know how the React team want to handle this case 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants