Why Aren’t react-hook-form States Updating When Using a React Context Provider?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm experiencing unexpected behavior when using react-hook-form inside a React context provider. Specifically, I see the following issues:

Error states are not triggered upon submission.
The inputs appear uncontrolled when monitored via watch(), with no visible changes.
Form state properties such as isDirty and isSubmitSuccessful do not update from their initial values.

I moved the useForm hook out of the context and into the component that creates the form, and everything works as expected. This leads me to ask: why would using react-hook-form inside a context provider cause these issues? Shouldn't it work the same way?

Below is the relevant code for the context provider:

TYPESCRIPT
import { zodResolver } from '@hookform/resolvers/zod';
import { createContext, ReactNode, useContext } from 'react';
import { useForm, UseFormReturn } from 'react-hook-form';
import { z } from 'zod';

import { CompanyTypeEnum } from '@/types/buyer.type';
import { CountrySchema, PhoneSchema } from '@/types/common.type';

type BuyerFormContext = UseFormReturn<BuyerForm>;

const BuyerFormContext = createContext<BuyerFormContext | undefined>(undefined);

const BuyerFormSchema = z.object({
  id: z.string().uuid().optional(),
  companyName: z.string().min(1),
  companyType: CompanyTypeEnum,
  companyPhone: PhoneSchema,
  streetLine1: z.string().min(1),
  streetLine2: z.string().optional(),
  city: z.string().min(1),
  stateOrRegion: z.string().min(1),
  postalCode: z.string().min(1),
  country: CountrySchema,
  website: z.string().min(1),
  defaultCurrency: z.string(),
  contactName: z.string().min(1),
  contactPosition: z.string().min(1),
  contactPhone: PhoneSchema,
  contactEmail: z.string().email(),
});

export type BuyerForm = z.infer<typeof BuyerFormSchema>;

export const BuyerFormProvider = ({
  children,
  defaultValues,
}: {
  children: ReactNode;
  defaultValues?: BuyerForm;
}) => {
  const form = useForm<BuyerForm>({
    resolver: zodResolver(BuyerFormSchema),
    mode: 'onSubmit',
    defaultValues: formDefault,
  });

  return <BuyerFormContext.Provider value={form}>{children}</BuyerFormContext.Provider>;
};

export const useBuyerForm = () => {
  const context = useContext(BuyerFormContext);
  if (context === undefined) {
    throw new Error('useBuyerForm must be used within a BuyerFormProvider');
  }
  return context;
};

Below is my usage of the context within the form component:

TYPESCRIPT
import { Loader2 } from 'lucide-react';
import { SubmitHandler } from 'react-hook-form';
import { useBlocker } from 'react-router-dom';

import { CustomSelect as CompanyTypeSelect } from '@/components/custom-select';
import { CustomSelect as ContactPositionSelect } from '@/components/custom-select';
import { Button } from '@/components/ui/button';
import { CountryDropdown } from '@/components/ui/country-dropdown';
import { CurrencySelect } from '@/components/ui/currency-select';
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { PhoneInput } from '@/components/ui/phone-input';
import { Separator } from '@/components/ui/separator';
import { type BuyerForm, useBuyerForm } from '@/context/buyer-form-context';
import { CURRENCIES } from '@/service/types';
import { COMPANY_TYPES } from '@/types/buyer.type';
import { CONTACT_POSITIONS, Country } from '@/types/common.type';

const BuyerForm = (props: {
  onCancel: () => void;
  onSubmit: SubmitHandler<BuyerForm>;
  formTitle?: string;
  submitBtnText?: string;
  isFormLoading?: boolean;
  isEdit?: boolean;
}) => {
  const {
    onCancel,
    onSubmit,
    formTitle = 'Edit Buyer',
    submitBtnText = 'Save Changes',
    isFormLoading = false,
    isEdit = false,
  } = props;

  const form = useBuyerForm(); // Assuming you are using useForm from react-hook-form
  const {
    formState: { isDirty, isSubmitSuccessful },
  } = form;

  useBlocker(({ currentLocation, nextLocation }) => {
    if (!isSubmitSuccessful && isDirty && currentLocation.pathname !== nextLocation.pathname) {
      return !window.confirm('You have unsaved changes. Are you sure you want to leave?');
    }
    return false;
  });

  const onCountryChange = (country: Country) => {
    const formValues = form.getValues();

    if (!isEdit) {
      if (!form.getFieldState('defaultCurrency').isTouched || formValues.defaultCurrency === '') {
        const countryCurrency = country.currencies[0];
        if ((CURRENCIES as string[]).includes(countryCurrency)) {
          form.setValue('defaultCurrency', countryCurrency);
        }
      }

      if (!form.getFieldState('companyPhone').isTouched || formValues.companyPhone.phone === '') {
        form.setValue('companyPhone', {
          phone: country.countryCallingCodes[0],
          country: country,
        });
      }
    }
  };

  return (
    <div className='mt-10'>
      <h1 className='h1 lg:mx-auto lg:max-w-screen-md'>{formTitle}</h1>
      <Form {...form}>
        <form
          className='mt-5 pb-20 lg:mx-auto lg:max-w-screen-md'
          onSubmit={form.handleSubmit(onSubmit)}>
          <div className='flex flex-col justify-between gap-y-2'>
            <div className='flex justify-between gap-x-4'>
              <FormField
                control={form.control}
                name='companyName'
                render={({ field }) => (
                  <FormItem className='flex-1'>
                    <FormLabel>Company Name</FormLabel>
                    <FormControl>
                      <Input placeholder='Acme Inc.' {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}  
              />
              <FormField
                control={form.control}
                name='companyType'
                render={({ field }) => (
                  <FormItem className='flex-1'>
                    <FormLabel>Company Type</FormLabel>
                    <FormControl>
                      <CompanyTypeSelect
                        onValueChange={field.onChange}
                        value={field.value}
                        name={field.name}
                        ref={field.ref}
                        options={COMPANY_TYPES}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}  
              />
            </div>
            <div className='flex gap-x-4'>
              <FormField
                control={form.control}
                name='companyPhone'
                render={({ field }) => (
                  <FormItem className='flex-1'>
                    <FormLabel>Company Phone</FormLabel>
                    <FormControl>
                      <FormControl>
                        <PhoneInput
                          {...field}
                          onChange={e => {
                            field.onChange({
                              phone: e.target.value.phone,
                              country: e.target.value.country,
                            });
                          }}
                          value={field.value.phone}
                          placeholder='Enter your number'
                          defaultCountry={field.value.country?.alpha2}
                          className='h-10'
                        />
                      </FormControl>
                    </FormControl>
                    <FormDescription>Include country code (e.g. +44)</FormDescription>
                  </FormItem>
                )}  
              />
              <FormField
                control={form.control}
                name='website'
                render={({ field }) => (
                  <FormItem className='flex-1'>
                    <FormLabel>Website</FormLabel>
                    <FormControl>
                      <Input placeholder='https://example.com' {...field} className='flex-1' />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}  
              />
            </div>
          </div>
          <Separator className='my-4 h-px bg-gray-200' />
          <div className='space-y-2'>
            <h3 className='paragraph-l-bold text-gray-700'>Address</h3>
            <div className='space-y-2'>
              <div className='flex justify-between gap-x-4'>
                <FormField
                  control={form.control}
                  name='streetLine1'
                  render={({ field }) => (
                    <FormItem className='flex-1'>
                      <FormLabel>Street Line 1</FormLabel>
                      <FormControl>
                        <Input placeholder='e.g., 123 Main Street, Building A' {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}  
                />
                <FormField
                  control={form.control}
                  name='streetLine2'
                  render={({ field }) => (
                    <FormItem className='flex-1'>
                      <FormLabel>
                        Street Line 2 <span className='paragraph-sm text-gray-400'>(optional)</span>
                      </FormLabel>
                      <FormControl>
                        <Input placeholder='e.g., Suite 100, Floor 3' {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}  
                />
              </div>
              <div className='flex justify-between gap-x-4'>
                <FormField
                  control={form.control}
                  name='postalCode'
                  render={({ field }) => (
                    <FormItem className='flex-1'>
                      <FormLabel>Postal Code</FormLabel>
                      <FormControl>
                        <Input placeholder='e.g., 94105' {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}  
                />
                <FormField
                  control={form.control}
                  name='city'
                  render={({ field }) => (
                    <FormItem className='flex-1'>
                      <FormLabel>City</FormLabel>
                      <FormControl>
                        <Input placeholder='e.g., San Francisco' {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}  
                />
              </div>
              <div className='flex justify-between gap-x-4'>
                <FormField
                  control={form.control}
                  name='stateOrRegion'
                  render={({ field }) => (
                    <FormItem className='w-[calc(50%-8px)]'>
                      <FormLabel>State/Region</FormLabel>
                      <FormControl>
                        <Input placeholder='e.g., California' {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}  
                />
                <FormField
                  control={form.control}
                  name='country'
                  render={({ field }) => (
                    <FormItem className='w-[calc(50%-8px)]'>
                      <FormLabel>Country</FormLabel>
                      <FormControl>
                        <CountryDropdown
                          placeholder='Select a country'
                          defaultValue={field.value.alpha3}
                          onChange={country => {
                            field.onChange(country);
                            onCountryChange(country);
                          }}
                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}  
                />
              </div>
            </div>
          </div>
          <Separator className='my-4 h-px bg-gray-200' />
          <div className='space-y-2'>
            <h3 className='paragraph-l-bold text-gray-700'>Contact Person</h3>
            <div className='flex justify-between gap-x-4'>
              <FormField
                control={form.control}
                name={`contactName`}
                render={({ field }) => (
                  <FormItem className='flex-1'>
                    <FormLabel>Name</FormLabel>
                    <FormControl>
                      <Input placeholder='e.g., John Smith' {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}  
              />
              <FormField
                control={form.control}
                name={`contactPosition`}
                render={({ field }) => (
                  <FormItem className='flex-1'>
                    <FormLabel>Position</FormLabel>
                    <FormControl>
                      <ContactPositionSelect
                        onValueChange={field.onChange}
                        value={field.value}
                        name={field.name}
                        ref={field.ref}
                        options={CONTACT_POSITIONS}
                        placeholder='Select a position'
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}  
              />
            </div>
            <div className='flex justify-between gap-x-4'>
              <FormField
                control={form.control}
                name={`contactEmail`}
                render={({ field }) => (
                  <FormItem className='flex-1'>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input placeholder='e.g., john.smith@company.com' {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}  
              />
              <FormField
                control={form.control}
                name={`contactPhone`}
                render={({ field }) => (
                  <FormItem className='flex-1'>
                    <FormLabel>Phone</FormLabel>
                    <FormControl>
                      <div className='flex w-full items-center'>
                        <CountryDropdown
                          onChange={country => {
                            const countryCode = country.countryCallingCodes[0];
                            const formattedCode = countryCode.startsWith('+')
                              ? countryCode
                              : `+${countryCode}`;
                            form.setValue(`contactPhone`, {
                              phone: formattedCode,
                              country: country,
                            });
                          }}
                          defaultValue={field.value.country?.alpha3}
                          inline
                        />
                        <PhoneInput
                          {...field}
                          onChange={e => {
                            field.onChange({
                              phone: e.target.value.phone,
                              country: e.target.value.country,
                            });
                          }}
                          value={field.value.phone}
                          placeholder='Enter your number'
                          defaultCountry={field.value.country?.alpha2}
                          inline
                        />
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}  
              />
            </div>
          </div>
          <Separator className='my-4 h-px bg-gray-200' />
          <div className='space-y-2'>
            <FormField
              control={form.control}
              name={`defaultCurrency`}
              render={({ field }) => (
                <FormItem className='w-[calc(50%-8px)]'>
                  <FormLabel>Payment Currency</FormLabel>
                  <FormControl>
                    <CurrencySelect
                      onValueChange={field.onChange}
                      placeholder='Select a currency'
                      disabled={false}
                      defaultValue={field.value}
                      currencies='all'
                      variant='default'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}  
            />
          </div>
          <div className='fixed inset-x-0 bottom-0 border-t border-gray-200 bg-white/70 backdrop-blur-sm'>
            <div className='flex justify-end gap-x-4 py-4 lg:mx-auto lg:max-w-screen-md'>
              <Button variant='outline' onClick={onCancel} disabled={isFormLoading}>
                Cancel
              </Button>
              <Button type='submit' variant='flume' disabled={isFormLoading}>
                {isFormLoading && <Loader2 className='mr-2 size-4 animate-spin' />}
                <span>{submitBtnText}</span>
              </Button>
            </div>
          </div>
        </form>
      </Form>
    </div>
  );
};

export default BuyerForm;

If anyone has encountered similar behavior or has insights into why the form state isn’t updating as expected when used within a context provider, your suggestions would be appreciated.

Comments 0

•

Answers 1

•

1 Answer

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is a brief explanation of what might be happening and some steps to fix it:

What’s Likely Happening

Reinitialization of Form State
When you put useForm into a context provider, if that provider is re-rendered frequently (or if its “defaultValues” are not stable) the form state may be resetting. This can “freeze” values like isDirty and error states because every render could be creating a brand new instance of the form.
Uncontrolled vs. Controlled Behavior
React Hook Form relies on refs and does not force rerenders on every keystroke. If the provider reinitializes the form methods or if the consumer does not receive a stable reference, it might seem that the tracked state (watch, dirty, etc.) never updates.
Using Context With useForm
While it is perfectly valid to use react-hook-form with a context provider, you must ensure that the form instance returned by useForm remains stable across renders and is not recreated unnecessarily. This is what you saw when moving useForm directly into the component—the instance remained stable.

How to Fix It

Memoize the Form Instance
Ensure that you only create the form object once. You can do this by using useMemo (or by ensuring the provider is only rendered once above your form components):

TYPESCRIPT
import { useMemo } from 'react';

export const BuyerFormProvider = ({
  children,
  defaultValues,
}: {
  children: ReactNode;
  defaultValues?: BuyerForm;
}) => {
  const form = useMemo(
    () =>
      useForm<BuyerForm>({
        resolver: zodResolver(BuyerFormSchema),
        mode: 'onSubmit',
        defaultValues: defaultValues ?? {}, // ensure defaultValues are used
      }),
    [defaultValues]
  );

  return (
    <BuyerFormContext.Provider value={form}>
      {children}
    </BuyerFormContext.Provider>
  );
};

Avoid Reinitializing on Consumer Rerenders
Make sure that your context provider is mounted once (for example, at a higher level in your component tree) and not re-rendered on every change of internal state.
Check Your Default Values
The snippet you posted shows defaultValues: formDefault but in the provider’s props you received a defaultValues property. Double-check that you are using the expected values. Changing them on re-render (or having them undefined) can lead to unexpected behavior.
Confirm Component Hierarchy
Ensure that the consuming component (the form) is always wrapped in its provider. If the consumer is rendered outside or if the provider is recreated multiple times, the internal register/watch mechanism in react-hook-form may break.

Summary

Yes, you can use react-hook-form inside a context provider. The key is to create a stable form instance and avoid reinitializing it on every render. Memoizing the form instance and ensuring that your default values don’t change unexpectedly should allow your form state (including error states, watch values, isDirty, and submission flags) to update as expected.

Feel free to ask further questions if you need more clarification on any of these points.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Discussion

No comments yet.