Suggestion: Add a shouldUnregister parameter to the form.getValues() method to work alongside useForm({ shouldUnregister: false }), improving the developer experience.

[ibeizhu]

dev confusion

useForm withshouldUnregister can handle automatic clearing of data under linked logic, but it results in a poor user experience.

For example, I have four radio buttons A, B, and C that can toggle types, each associated with different fields.

When shouldUnregister = true, if the user fills in the fields under type A and then switches to type B, returning to type A results in the previously filled data being completely cleared, which is very unfriendly to the user.

When shouldUnregister = false, this problem can be resolved, but if users fill in data for both types A and B, when submitting the form, while using form.getValues(), the data will include dirty data from type B since type A is the final submission, requiring developers to manually clear this. This is also unfriendly for developers since the UI logic needs to reprocess the data upon submission, which is prone to errors.

import React, { useEffect } from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, watch, handleSubmit, getValues } = useForm({
    shouldUnregister: true,
    // shouldUnregister: false,
  });

  const onSubmit = (data) => {
    console.log("onSubmit", data);
  };

  const type = watch("type");

  useEffect(() => {
    const data = getValues();
    console.log("getValues", data);
  }, [type]);

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="typeA">typeA</label>
          <input type="radio" id="typeA" value="A" {...register("type")} />

          <label htmlFor="typeB">typeB</label>
          <input type="radio" id="typeB" value="B" {...register("type")} />

          <label htmlFor="typeC">typeC</label>
          <input type="radio" id="typeC" value="C" {...register("type")} />
        </div>

        {type === "A" ? (
          <div>
            textA:
            <input type="text" {...register("textA")} />
          </div>
        ) : null}

        {type === "B" ? (
          <div>
            textB:
            <input type="text" {...register("textB")} />
          </div>
        ) : null}

        {type === "C" ? (
          <div>
            textC:
            <input type="text" {...register("textC")} />
          </div>
        ) : null}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Expected behaviour & Suggestion

Is it possible to provide a new parametershouldUnregister to the getValues function? This would allow users to obtain clean form data by calling form.getValues(shouldUnregister), automatically excluding hidden data.

In other words, when shouldUnregister = false, it ensures a good user experience for UI editing. When retrieving data, by using form.getValues({ shouldUnregister: true }), it only fetches the data from registered fields, ensuring the accuracy of the submitted data.

API like

const { register, watch, handleSubmit, getValues } = useForm({
    shouldUnregister: false,
  });

const values = getValues({
    shouldUnregister: true,
});