revert useField and unregisterField changes from v1.66.1 (#210)

src/components/Form.js

@@ -125,12 +125,6 @@ function Form(_props) {
   };
   const unregisterField = (name) => {
     delete fields.current[name];
-
-    setState((state) =>
-      deletePath(state, `errors.${name}`, {
-        deleteEmptyObjects: { except: ["errors"] },
-      })
-    );
   };
   const providerValue = {
     state,

src/components/Form.test.js

@@ -45,16 +45,6 @@ const hungryOptions = [
     value: "maybe",
   },
 ];
-const yesNoOptions = [
-  {
-    label: "Yes",
-    value: "yes",
-  },
-  {
-    label: "No",
-    value: "no",
-  },
-];
 
 function SimpleForm({ testId }) {
   const initialValues = {
@@ -344,65 +334,6 @@ describe("Form", () => {
     ).toBeInTheDocument();
   });
 
-  it("with hidden fields", async () => {
-    const onSubmit = jest.fn();
-    const { container } = render(
-      <Form
-        initialValues={{ hasMiddleName: "", middleName: "" }}
-        onSubmit={onSubmit}
-      >
-        {({ state }) => (
-          <>
-            <RadioGroup
-              name="hasMiddleName"
-              label="Do you have a middle name?"
-              options={yesNoOptions}
-            />
-            {state.values.hasMiddleName === "yes" && (
-              <Input name="middleName" label="Middle name" />
-            )}
-            <Button type="submit">Submit</Button>
-          </>
-        )}
-      </Form>
-    );
-
-    const yesInput = screen.getByLabelText("Yes");
-    const yesLabel = container.querySelector(
-      `label[for="${yesInput.getAttribute("id")}"]`
-    );
-    const noInput = screen.getByLabelText("No");
-    const noLabel = container.querySelector(
-      `label[for="${noInput.getAttribute("id")}"]`
-    );
-
-    userEvent.click(yesLabel);
-
-    const middleNameInput = screen.getByLabelText("Middle name");
-    middleNameInput.focus();
-    middleNameInput.blur();
-
-    // Wait until form state is updated with the error.
-    // Without this await, the test ends before form's state gets the error.
-    await waitFor(() => {
-      expect(screen.getByText("Required")).toBeInTheDocument();
-    });
-
-    userEvent.click(noLabel);
-    screen.getByRole("button", { name: "Submit" }).click();
-
-    await waitFor(() =>
-      expect(onSubmit).toBeCalledWith({
-        errors: {},
-        values: {
-          hasMiddleName: "no",
-          middleName: "",
-        },
-        setErrors: expect.any(Function),
-      })
-    );
-  });
-
   it("with testId", () => {
     const { container } = render(<SimpleForm testId="my-form" />);
 

src/hooks/internal/useField.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import useForm from "./useForm";
 import { getPath } from "../../utils/objectPath";
 import { notStringOrEmpty } from "../../utils/string";
@@ -18,21 +18,6 @@ function useField(componentName, { name, disabled, optional, validate, data }) {
     unregisterField,
   } = useForm(componentName);
 
-  // We use this ref to ensure that registerField and unregisterField are called only
-  // on component mount and unmount. In other words, we want to ensure that the useEffect
-  // below has an empty dependency array.
-  const registerDataRef = useRef();
-
-  registerDataRef.current = {
-    registerField,
-    unregisterField,
-    name,
-    disabled,
-    optional,
-    validate,
-    data,
-  };
-
   if (typeof state.values === "undefined") {
     throw new Error("Form is missing initialValues");
   }
@@ -47,16 +32,6 @@ function useField(componentName, { name, disabled, optional, validate, data }) {
   const hasErrors = Array.isArray(errors) && errors.length > 0;
 
   useEffect(() => {
-    const {
-      registerField,
-      unregisterField,
-      name,
-      disabled,
-      optional,
-      validate,
-      data,
-    } = registerDataRef.current;
-
     registerField(name, {
       disabled,
       optional,
@@ -67,7 +42,15 @@ function useField(componentName, { name, disabled, optional, validate, data }) {
     return () => {
       unregisterField(name);
     };
-  }, []);
+  }, [
+    name,
+    disabled,
+    optional,
+    validate,
+    data,
+    registerField,
+    unregisterField,
+  ]);
 
   return {
     value,