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. 😕

[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