useFormFields

This hook allows you to retrieve the state of each fields of a form.

Basic usage

const fields = useFormFields();

Usage at top level

To use this hook at the top level, you need to connect it to the form.

const form = useForm();
 
<MyComponent form={form}>
  const fields = useFormFields({
    connect: form,
  });
</MyComponent>

Then, you'll be able to access to your fields' states.

Get only some fields

Allow you to filter your fields by name(s) that you want to fetch.

const someFields = useFormFields({ fields: ["firstName", "lastName"] });

You can use nested.field or array[0].nested syntaxes.

const someFields = useFormFields({
  fields: [
    "personalInfo.firstName",
    "personalInfo.lastName",
    "books[0].name",
    "books[0].editor",
  ],
});

Get only some state

Allow you to filter which states fields by state.

const fieldsIsValid = useFormFields({ selector: (field) => field.isValid });
 
const fieldsValues = useFormFields({ selector: (field) => field.value });

This way, you can avoid re-rendering the form if a state you don't need updates, and lessen the strain on the page.

const fieldsCustom = useFormFields({
  selector: (field) =>
    field.isSubmitted && field.value === "julie" ? "OK" : "KO",
});

useFormContext()useField()