Debugging Unnecessary Re-Renders: Combining isDirty Flag and useFormState Hook in a Form

[derekbking]

I believe I may have found a bug in the library, but I'm wanting to get some feedback incase I'm overlooking something.

I have a simple scenario where I mark the input labels of dirty fields red. I can do so without causing re-renders to the parent component like so:

const LabledInput: React.FC<LabledInputType> = ({ name, title }) => {
  const { register } = useFormContext();
  const { dirtyFields } = useFormState({ name });
  const isFieldDirty = !!dirtyFields[name];

  return (
    <>
      <label
        style={{
          color: isFieldDirty ? "red" : undefined,
        }}
      >
        {title}
      </label>
      <input {...register(name)}></input>
    </>
  );
};

I also have some logic to create a red border if the form is dirty. This code appropriately only re-renders the App when the isDirty state changes. However, I started to see unnecessary re-renders of the App when I have both the red label logic and the isDirty logic implemented. Every time I dirty a field I will get an additional re-render of the App even though the isDirty flag was already true. This seems odd to me because the formState should be wrapped in a proxy according the the docs. I have not subscribed to dirtyFields within the App component, so I do not expect re-renders when the dirtyFields property changes. It feels that the useFormState hook shares a proxy with the original form state causing the App component to subscribe to dirtyFields even though I did not explicitly do so in the App component.

export default function App() {
  const form = useForm({
    defaultValues: {
      firstName: "John",
      lastName: "Doe",
      address: "123 NE 3rd Ave",
    },
  });
  const {
    formState: { isDirty },
  } = form;

  // Keep track of renders
  const renderCount = useRef(0);
  renderCount.current = renderCount.current + 1;

  return (
    <div className="App">
      <FormProvider {...form}>
        <form
          onSubmit={() => {}}
          style={{
            display: "grid",
            gridTemplateColumns: "1fr",
            gap: "8px",
            border: isDirty ? "1px solid red" : undefined,
          }}
        >
          <LabledInput title="First Name" name="firstName" />
          <LabledInput title="Last Name" name="lastName" />
          <LabledInput title="Address" name="address" />
        </form>
      </FormProvider>
      <p>Render Count: {renderCount.current}</p>
    </div>
  );
}

CodeSandbox Demo