Use Field Array Context

[wdfinch]

The useFormContext hook and provider is really useful. I'm wondering if there is a way I can do something similar for the useFieldArray hook. My use case is I have some complex field arrays that I break into multiple components. It would be nice to move some of the methods like remove, fields (to check the length), etc through the children without having to manually pass or make my own context provider. Is something like this built-in?

[bluebill1049]

That's a really interesting idea. I think we should definitely consider this at v7.

[wdfinch]

Thanks! I think it would just work like useFormContext and shouldn't be too tricky. Would just be a nice convenience helper to add if it doesn't add too much to bundle size.

[charkour]

One solution is to create a provider that includes the useForm methods and useFieldArray methods. This adapts the current FormContext code and adds UseFieldArrayMethods to it.

type AllFormMethods<TFieldValues extends FieldValues = FieldValues> = UseFormMethods<TFieldValues> &
  UseFieldArrayMethods;

const FieldArrayFormContext = React.createContext<AllFormMethods | null>(null);

FieldArrayFormContext.displayName = "RHFArrayContext";

export const useFieldArrayFormContext = <TFieldValues extends FieldValues>(): AllFormMethods<
  TFieldValues
> => {
  return useContext(FieldArrayFormContext) as AllFormMethods<TFieldValues>;
};

export declare type FieldArrayFormProviderProps<TFieldValues extends FieldValues = FieldValues> = {
  children: React.ReactNode;
} & AllFormMethods<TFieldValues>;

export const FieldArrayFormProvider = <TFieldValues extends FieldValues>({
  children,
  ...props
}: FieldArrayFormProviderProps<TFieldValues>) => {
  return (
    <FieldArrayFormContext.Provider value={{ ...props } as AllFormMethods}>
      {children}
    </FieldArrayFormContext.Provider>
  );
};

usage:

  const formMethods = useForm({
    defaultValues: { "test": {name: "myName" } },
  });
  const { control, handleSubmit } = formMethods;
  const fieldArrayMethods = useFieldArray({
    control,
    name: "test",
  });

  return (
    <FieldArrayFormProvider {...formMethods} {...fieldArrayMethods}>
      <form
        onSubmit={handleSubmit((data) => {
          // TODO: handle this.
          console.log(data);
        })}
      >
      ...
      </form>
    </FieldArrayFormProvider>
  );
};

[HermanNygaard]

Cool, how could you do this with nested useFieldArrays deeper down?

[charkour]

When you say "nested useFieldArrays", what exactly do you mean? Further down in the component tree or a form the contains a field array that contains another form?

[samageloff]

Circling back to this, almost a year later. 👯

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

I'm wonder if, by "nested useFieldArrays" @HermanNygaard meant, what if we wanted to leverage a field array on a different name nested in the app.

Eg: right now, with this approach, the dev is bound to name: "test" Deeper into the tree, we may need:

const fieldArrayMethods = useFieldArray({
    control,
    name: "test.nested",
  });

I'm finding the above approach works really well, until one needs to pass reference to a different set of fields.

[Lazercat]

this is a really good idea, it also points out why RHF is unnecessary in more advanced form needs perhaps such as the one you are working on, and at a certain level of complexity form state could and probably should just be managed from a custom vanilla react hook/context in a provider using useState or useReducer, where one has full control over the state at all times and can easily gain 100% test coverage with renderHook from testing library on the data layer of the implementation separate from the ui, especially in a scenario where using something like MUI where parking state in inputs instead of react state is less ideal. the thought of doing this with RHF is great though because suddenly every portion of RHF can be called from the same place even across many many nested ui components without constraint, and likewise in a manner that can be fully tested.

[ddanielgal]

I see that this was not included in v7. Is it still being considered as a feature or should we accept the workaround as a final solution to this problem?

[bluebill1049]

no solution for a context api with useFieldArray so far.

[Stevetolba]

Any update on the context apo with useFieldArray?

[Moshyfawn]

#7544

[bluebill1049]

feel free to send us feedback with the API/syntax.

[buraev]

This answer helped me a lot!
Thanks for the question @wdfinch and for the greate answer @charkour!

In RHF ChangeLog ## [v7.0.0-alpha.2] - 2021-02-04 there are name changes:

- UseFormMethods
+ UseFormReturn

- UseFieldArrayMethods
+ UseFieldArrayReturn

Not greate for TS, but this workin for me now:

type AllFormMethods<TFieldValues extends FieldValues = FieldValues> = UseFormReturn<TFieldValues> &
  UseFieldArrayReturn;

const FieldArrayFormContext = React.createContext<AllFormMethods | null>(null);

FieldArrayFormContext.displayName = "RHFArrayContext";

export const useFieldArrayFormContext = <TFieldValues extends FieldValues>(): AllFormMethods<
  TFieldValues
> => {
  return useContext(FieldArrayFormContext) as AllFormMethods<TFieldValues>;
};

export declare type FieldArrayFormProviderProps<TFieldValues extends FieldValues = FieldValues> = {
  children: React.ReactNode;
} & AllFormMethods<TFieldValues>;

export const FieldArrayFormProvider = <TFieldValues extends FieldValues>({
  children,
  ...props
}: FieldArrayFormProviderProps<TFieldValues>) => {
  return (
    <FieldArrayFormContext.Provider value={{ ...props } as AllFormMethods}>
      {children}
    </FieldArrayFormContext.Provider>
  );
};

It’s a pity that your decision was not accepted by the RHF @bluebill1049
I hope they implement it soon #7544 -- useFormContext support field array

[Lipera]

I struggled real hard with this one as well and thank you @Prince-Gizard for your inspiration. I devised a more TypeScript friendly solution inspired in the code you posted. My approach still has the disadvantage of only being able to pass 1 single array field, but it's good enough for me for now. Some kind of distinction according the field name would probably be necessary.

Disclaimer: In my scenario (since I use ShadeCN Form Provider) I thought it to be cleaner in a first instance to not touch their provider, but have my own FieldArrayFormProvider, so I don't have the AllFormMethods like you guys have, but it should easy enough to adapt (I think, maybe famous last words 🤣).

const createUseFieldArrayContext = <
  TFieldValues extends FieldValues = FieldValues,
  FieldArrayName extends
    FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
  TKeyName extends string = 'id'
>() => {
  type FormFieldContextValue = UseFieldArrayReturn<
    TFieldValues,
    FieldArrayName,
    TKeyName
  >

  const FieldArrayFormContext = React.createContext<FormFieldContextValue>(
    {} as FormFieldContextValue
  )

  const useFieldArrayFormContext = (): FormFieldContextValue => {
    return React.useContext(FieldArrayFormContext)
  }

  type FieldArrayFormProviderProps = {
    children: React.ReactNode
  } & FormFieldContextValue

  const FieldArrayFormProvider = ({
    children,
    ...props
  }: FieldArrayFormProviderProps) => {
    return (
      <FieldArrayFormContext.Provider value={{ ...props }}>
        {children}
      </FieldArrayFormContext.Provider>
    )
  }

  return {
    FieldArrayFormContext,
    useFieldArrayFormContext,
    FieldArrayFormProvider
  }
}

And then when you need to use it:

const {
  FieldArrayFormProvider: FooFieldArrayProvider,
  useFieldArrayFormContext: useFooFieldArrayContext
} = createUseFieldArrayContext<FooFormValues>()

Hope this helps someone down the line 🙏

[vietvh-3042]

It will be cool to have separate decoupled logic for field array