React Compiler support

[eucaos]

Hello,

Is it's safe to use today the react-hook-form library together with the react compiler ?
I saw already some recommendations to use useWatch instead of watch function, but there also seem to be issues with other functions as well, for example the getValues function.

1. Is there a plan to have a release targeting better compatibility with the react compiler?
2. What part of the currently exposed functionality is expected to break under react compiler ?

[Svish]

I've attempted to turn on the React Compiler this week, and yeah, there are definitely issues. So far I've definitely ran into the well-known issues with watch, but there also seem to be issues with formState, errors, possibly all objects returned from useForm?

As far as I can see getValues does work, but only in event callbacks and such, which I think is the intended use of that function, so that's alright.

Anyways, it would be really great with some guidance and a migration guide of some sort here. We have for example a bunch of cases like {watch('value') > 5 && <something />} or {watch('choice') === true && <something />}, that I'm very unsure how to best solve now. Could use useWatch, but then all of those cases would need to be put into child components, which I'd really like not to do as it would make the form harder to follow. 😕

[marcoms]

For me the values passed to the handleSubmit() handler aren't correct either

[Catlike14]

I have problems when using reset. Is there some news egarding the support?

[KJ-GM]

Any updates regarding React Compiler support?

[lucas-garrido]

https://github.com/react-hook-form/react-hook-form/releases/tag/v8.0.0-alpha.5

[danielwaltz]

For anyone here who needs it, you can disable React Compiler granularly using the "use no memo" directive. https://react.dev/reference/react-compiler/directives/use-no-memo

I wrap my forms in a special hook usually, and placing the directive in the hook function body fixes the issue for me:

import { type UseFormProps, useForm } from 'react-hook-form';

function useFormCompat(props?: UseFormProps) {
  // Disable react compiler until react-hook-form supports it.
  // https://github.com/orgs/react-hook-form/discussions/12524
  'use no memo';

  return useForm(props);
}

export function Component() {
  const form = useFormCompat();

  return <>...</>
}

[infodusha]

While this will work, let me provide a quote from docs "It’s intended as a temporary debugging tool, not a permanent solution.".
So you may not want to rush it.

[danielwaltz]

True, but the docs also mention a legitimate use case is integrating with third-party libraries that are not compatible!

https://react.dev/reference/react-compiler/directives/use-no-memo#when-to-use

[timkindberg]

This should answer the 2nd bullet of OP's question.

I wanted to get a fuller picture of what RHF apis were broken, and of those, which had valid alternatives (e.g. watch -> useWatch). Made this repo that tests all the apis and wrote up a report of the results.

https://github.com/timkindberg/rhf-compiler-compat

TLDR; Here are the key take-aways for devs wondering what they need to do for now until this is fixed in the library:

Workarounds

For each breaking API, here are the recommended workarounds:

Breaking API	Recommended Workaround	Notes
form.watch('field')	Replace with useWatch({ name: 'field', control })	Hook-based subscription, triggers re-renders properly
form.watch() (no args)	Replace with useWatch({ control })	Watches all fields via hook subscription
useFormContext() + watch	No alternative -- Use 'use no memo'	Context consumers are memoized by compiler
<Controller>	No alternative -- Use 'use no memo'	Control object interior mutability
useController	No alternative -- Use 'use no memo'	Control object interior mutability
getValues() in render	Replace with useWatch({ name: 'field', control }) for specific fields, OR move getValues() to callbacks/effects	Avoid calling during render; use hooks for reactive values
reset()	No alternative -- Use 'use no memo'	Reset behavior breaks under memoization
reset() with new defaults	No alternative -- Use 'use no memo'	Same as reset()
watch in useEffect deps	Replace watched value with useWatch({ name: 'field', control })	Effect deps need reactive values from hooks
Conditional fields via watch	Replace form.watch('type') with useWatch({ name: 'type', control })	Conditional rendering needs reactive hook values
Nested watch paths	Replace form.watch('user.address.city') with useWatch({ name: 'user.address.city', control })	Deep paths work with useWatch
useFieldArray + watch	Replace form.watch('items') with useWatch({ name: 'items', control })	Array watching needs hook subscription
formState.isDirty via context	Child should use useFormState({ control }) with control passed as prop	Hook-based state access instead of context

[longzheng]

Specifically for the watch API, there's a useful eslint plugin that can help prevent usages of the watch API. https://github.com/andykao1213/eslint-plugin-react-hook-form/blob/main/docs/rules/no-use-watch.md

[tatsuya-asami]

Following up on @timkindberg's report -- I re-ran the test suite on the current GA stack and most of the historically broken APIs are now fixed. PR with the upgrade is here: timkindberg/rhf-compiler-compat#1

Updated stack: React 19.2.5, react-hook-form 7.75, babel-plugin-react-compiler 1.0.0 (GA), target: '19'.

In my experience, after the upgrade most of the previously failing tests now pass without any workaround. If you only stuck 'use no memo' on useForm hosts to dodge watch, Controller, getValues, reset, useFieldArray, etc., you can probably drop it. Going forward, what most readers actually want to know is "what should I keep in mind day-to-day?" -- it reduces to three habits.

Day-to-day rules of thumb

1. Use useWatch({ name, control }) instead of watch. The hook subscribes explicitly and works in both useForm hosts and useFormContext() children.

   // ❌ stale in useFormContext children; fragile in general
   const { watch } = useFormContext()
   const value = watch('field')
   
   // ✅ explicit hook subscription, safe everywhere
   const value = useWatch({ name: 'field', control })

2. Use useFormState({ control }) instead of reading formState off the form object.

   // ❌ stale when read across a useFormContext() boundary
   const {
     formState: { isDirty },
   } = useFormContext()
   
   // ✅ explicit hook subscription, safe everywhere
   const { isDirty } = useFormState({ control })

   And don't pass the formState proxy down as a prop -- pass primitives or have the child call useFormState itself.

3. Bind fields with <Controller> (or useController) whenever the value is rewritten programmatically (reset(), reset({...}), useForm({ values })). Plain register doesn't survive RHF's internal _reset under the compiler; Controller does.

Keep these three habits and you can leave React Compiler on without thinking about it in normal development. The hook versions work everywhere -- you don't need to remember the host vs. child distinction.

⚠ Watch out for the formState Proxy (not compiler-specific)

formState is a Proxy that only subscribes to fields you actually read at render time. JS short-circuit evaluation can defeat this:

// ❌ formState.isValid is never reached when isDirty is false
//    → the Proxy doesn't subscribe to isValid → button stays stale
<button disabled={!formState.isDirty || !formState.isValid} />

// ✅ destructure up-front so both fields are read every render
const { isDirty, isValid } = formState
<button disabled={!isDirty || !isValid} />

Documented under useForm > formState > RULES. Same family of trap as the compiler-memoization issues: if RHF's tracking machinery doesn't see you read the field, it can't notify you when it changes.

What still breaks

After upgrading, three patterns still fail under the compiler in our test suite:

Pattern	Notes
watch(...) read via useFormContext() in a child	The compiled child does not re-render when the watched value changes
formState.X read via useFormContext() in a child	Same
register + reset() / reset({...}) / useForm({ values })	_reset wipes _fields and _names.mount, expecting the next render to re-call register(name) to re-bind input refs. Under compiler memoization that call is not re-issued, so the mount set stays empty and the DOM input never receives the restored value. Controller doesn't have this problem because useController subscribes independently

'use no memo' is the universal escape hatch, but if register(name) lives inside a compiled descendant you have to add it to that descendant and every ancestor whose memoized JSX would otherwise stop it from re-rendering. I think the Controller swap is usually less invasive in practice.

[yudin-s]

For production code today, I would treat React Compiler + RHF as an opt-in migration, not a blanket switch.

The safe mental model is:

• values that affect render should come from subscription hooks (useWatch, useFormState, useController)
• imperative snapshots (getValues) are fine in event handlers/effects, but not as reactive render inputs
• APIs that rely on RHF's internal mutable control object are the risky area under compiler memoization

So this pattern is compiler-friendlier:

const type = useWatch({ control: form.control, name: 'type' })
return type === 'company' ? <CompanyFields /> : <PersonFields />

than this:

return form.watch('type') === 'company' ? <CompanyFields /> : <PersonFields />

For large apps, I would migrate in layers:

1. Keep complex form islands behind 'use no memo' first.
2. Convert render-time watch() calls to useWatch().
3. Convert render-time formState reads in children to useFormState() or useController().
4. Keep getValues() for submit/click/effect logic, not conditional rendering.
5. Only remove 'use no memo' after tests cover reset, Controller, conditional fields, and field arrays.

That gives you a path to use the compiler around forms without betting the whole form system on compiler compatibility at once.

[moteeb-asad]

I tested this with react-hook-form 7.89.0, React 19.2 and babel-plugin-react-compiler 1.0.0.

Two things still break for me:

• getValues() in render shows the old value after a re-render
• watch passed as a prop to a child component doesn't update

Both components compile fine, and the eslint compiler rules don't show any warning. Using useWatch fixed both.

I shared a related test here: Linkedin Post