Messages from zod input validation doesnt work with react compiler. NextJS.

[krystianmolas]

Hi,
I'm encountering an issue with displaying validation messages in a basic input form using Zod for validation, as documented here: https://ui.shadcn.com/docs/components/input. This setup worked in previous projects, but in my current project, which utilizes the experimental React compiler, the validation messages fail to appear. When I disable the React compiler by commenting out the following configuration:

experimental: { reactCompiler: true, }

the validation messages display correctly. Has anyone experienced a similar issue, or could this be a bug related to the experimental React compiler?

[zerosym]

I believe this has to do with the usage of formState from useFormContext below (in the ui/form.tsx file):

ui/apps/www/registry/new-york/ui/form.tsx

Lines 47 to 49 in 259a9ff

	const { getFieldState, formState } = useFormContext()
	const fieldState = getFieldState(fieldContext.name, formState)

If formState is referentially stable between renders memoization will prevent fieldState from updating here.

The solution I'm currently using is to swap both those lines with:

 // import useController along with the rest of the hook-form imports
 const { fieldState } = useController({ name: fieldContext.name })

I don't know how ideal this is compared to whatever fix will end up being merged, but it seems to work for me. As an escape hatch for any other potential issues there is also 'use no memo'.

[OreQr]

Thanks it works for me too.

Full code:

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { name, formMessageId } = useFormField();
  const { fieldState } = useController({ name });
  const body = fieldState.error ? String(fieldState.error?.message) : children;
  ...

[nazar-pal]

Just Thank You

[HereOrCode]

I encountered the same issue:

Using the react compiler, the components in the form could not work properly.

But zerosym's solution resolved this issue, thank you very much.

[imteammy]

I found another solution

Code:

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

// create this hook
export function useCompute<T>(factory: () => T): T {
  'use no memo';
  return factory();
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext);
  const itemContext = React.useContext(FormItemContext);
  const { getFieldState, formState, control } = useFormContext();
  
  // react-compiler will skip hooks
  // Although formState is a stable reference object, useCompute is executed every time a new render is performed.
  // And got new results
  
  // solution A
  const fieldState = useCompute(() => getFieldState(fieldContext.name, formState)); 
  
  // or solution B
  const formState = useFormState({ control, name: fieldContext.name, exact: true });
  const fieldState = useCompute(()=> getFieldState(fieldContext.name, formState));

 
  if (!fieldContext) {
    throw new Error('useFormField should be used within <FormField>');
  }

  const { id } = itemContext;

  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  };
};

and it work with method.watch, and another function

const Component = () => {
     const methods = useForm();
     const name = useCompute(()=> method.watch('name', ''));
     const nameState = useCompute(() => methods.getFieldState('name', methods.formState));
}