Why is the parent component rerendering when I call the useFieldArray methods?

[novelette17]

I use version 7.25.1

When I add a new question, there is a re-render in the parent component. However, this was not the case in version 6, if you look at this codesandbox.

Below I have shown only the form for adding questions. But in my project, there is an array of answers for each question. When I add a new answer, it re-renders again in the "Container" component. I did everything, as in codesandbox from the link above.

The parent component looks like this:

function Container() {
  const formMethods = useForm<TFormValues>({
    defaultValues: {
      title: "Some title",
      questions: []
    }
  });

  console.log("re-rendered when adding a new question! ");

  return (
    <FormProvider {...formMethods}>
      <Questions />
    </FormProvider>
  )
}

Component where I add "questions":

function Questions() {
  const formCntx = useFormContext<TFormValues>();

  const {
    control,
    formState: { errors },
    resetField,
  } = formCntx;

  const questionsFieldArray = useFieldArray({
    control,
    name: "questions",
  });

  return (
    <>
      <span>Questions list:</span>
      {questionsFieldArray.fields.map((field, questionIndex) => (
        <Box key={field.id}>
          <Controller
            render={({ field }) => (
              <Box sx={{ display: "flex" }}>
                <TextField
                  required
                  label="Question title"
                  color="primary"
                  size="small"
                  sx={{ flex: 1, marginRight: 1 }}
                  {...field}
                />
                <Tooltip title="Remove question">
                  <IconButton
                    edge="end"
                    color="default"
                    onClick={() =>
                      questionsFieldArray.remove(questionIndex)
                    }
                  >
                    <DeleteIcon />
                  </IconButton>
                </Tooltip>
              </Box>
            )}
            name={`questions.${questionIndex}.title`}
            control={control}
          />
        </Box>
      ))}
     <Button
       size="small"
       variant="outlined"
       onClick={() =>
         questionsFieldArray.append({
           title: "New question"
         })
       }
     >
       Add new question
     </Button>
    </>
  )
}

What am I doing wrong? When I add a lot of questions and answers to the form, it starts to slow down a lot.

[slugmandrew]

Hi there, could you create a codesandbox showing the issue happening? If so I will happily take a look, as I am interested in field arrays 🙂

[Moshyfawn]

Alright, I've reproduced it without the MUI lib.
The re-render happens when you subscribe to formState. In the example above, the OP does

const { errors } = formState

You can see this behavior in this CSB.
You can comment out the destructing of formState in the CSB example to prevent re-renders from happening.

field-array-state-rerender.mp4

[tanthuann]

@novelette17 This really helped me out! My large app had over 5 nested useFieldArrays, and debugging it was a real pain. Thanks a bunch for your help!

[bluebill1049]

if you subscribed formState at the parent level then it will re-render at the form level, it's not that's not desired exp, use useFormState instead, however in your use case I would investigate into your component level. hook form is not the bottleneck of your performance, instead its already been enhanced in many ways, eg each keystroke, reconcile on render based on formState update, etc. If your component tree gets laggy by 1/2 re-render due to append/prepend, then you should look into your component render perf.

[ajay423singam]

I’m facing a similar issue . I am using formContextprovider hook and in one of the child component im using the useFormArray hook. I’m using this to create a wizard form. When I try to remove an element form the array , it takes me to the first step of the wizard form . Can’t understand why , any inputs will be appreciated . Was the issue solved by not subscribing to formstate ?