useFormContext modifies proxy state as though it is root when used from child component

[DavidJohnWilliams]

Version Number

7.45.0

Codesandbox/Expo snack

https://codesandbox.io/s/rhf-useformcontext-errors-wxnrv5?file=/src/App.tsx

Steps to reproduce

1. Go to sandbox
2. Enter value into triggerInput
3. Blur the input
4. Form render count increased

Expected behaviour

Form render count does not increase

What browsers are you seeing the problem on?

Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[DavidJohnWilliams]

Additional info:

It looks like useFormContext is calling getProxyFormState which actually has side effects on the control form state when properties are accessed.

This causes the values to be updated to all so shouldRenderFormState starts returning true.

Using useFormState instead (see https://codesandbox.io/s/rhf-useformstate-errors-9g28y3?file=/src/App.tsx) does not have the same issue.

[bluebill1049]

#10512

[DavidJohnWilliams]

I'm not so sure this is a duplicate. This issue in #10512 is that useFormContext breaks memoisation of child components when the parent is re-rendered.

In our case it is more specific that deconstructing formState (or just accessing one of the props) propagates a change to the formState in the context. When subsequently calling trigger, it causes the entire form to re-render rather than just invalid components.

The reason is because the formState returned from useFormContext has side effects, where the formState returned from useFormState does not (or at least not the same ones).

[bluebill1049]

In our case it is more specific that deconstructing formState (or just accessing one of the props) propagates a change to the formState in the context. When subsequently calling trigger, it causes the entire form to re-render rather than just invalid components.

I am not sure about this, and what performance issue you are having with this issue. If one extra render is causing a problem with your form, this is probably worth it for your team to look into instead of at your app level. Open for PR for this as well, I can take a look at see if it's reasonable for us to merge it in and publish.

[DavidJohnWilliams]

Hi Bill, thanks for responding so quickly.

Our performance issue is already resolved by using useFormState rather than formState returned from useFormContext.

The actual issue is that the form is very large so rendering the whole thing takes a long time. If blurring an input in the form triggers the whole form to re-render, then it makes the whole form feel sluggish to use.

The reason for the re-render is that useFormContext's proxy changes the control.formState in such a way that triggering any field causes the whole form to re-render.

From what we can tell it's something to do with getProxyFormState which changes errors to all which is then checked by shouldRenderFormState.

I would say that without a good understanding of the intricacies of the proxyFormState and why it has side effects, it will be quite hard for us to recommend a fix.

If it is not possible/worthwhile to fix, it may be worth at least calling it out in the docs?

[leapful]

@DavidJohnWilliams

I think the documentation already explained about this behavior:

formState: Object
This object contains information about the entire form state. It helps you to keep on track with the user's interaction with your form application.

Reference: https://react-hook-form.com/docs/useform/formstate

The main purpose of formState is to listen on any change of any field from the form.

The reason of your issue If blurring an input in the form triggers the whole form to re-render, then it makes the whole form feel sluggish to use. is because you are using formState on app root level so useFormState hook is the correct solution to apply isolate component on field level.

[diegomarcuz]

Correct me If I understood the scenario, but I am having a similar scenario.

Inputs that start empty and rules are defined by the validate function so as I am subscribing to the isValid property (from useFormState or formState), the initial render I don't know if the form is valid or not, because of the validate. RHF needs to run the validate function to understand if the input has a valid or invalid value.

In a nutshell

When subscribed to isValid and creating a validation using the validate function, RHF does not know if the input is valid or not so it is necessary to run the function.

• validate function:

useController({
    name: "input-name",
    rules: {
      validate: value => {
        if (!value) {
            //validation
          return false;
        }
        return true;
      },
    },
  });

This is run on component mount, because isValid property is subscribed. So it is necessary to create a different way to validate the input at the rules object, like

useController({
    name: "input-name",
    rules: {
    required: true
    },
  });