Duplicate field mounted

[andyrichardson]

About

Currently we throw an error when a duplicate field is mounted. This is the case because:

• Fielder isn't designed to have the same field mounted twice
• There aren't any use cases where mounting a field twice makes sense (read-only access of field can be done using useFormContext)

There is an exception to this which is caused by useEffect race conditions. There are no guarantees that useField's teardown can be called, and its impact on the form state be applied, before another component mounts a field.

Example

const A = () => {
  const [nameProps] = useField({
    name: "name",
  });

  return null;
};

const B = () => {
  const [nameProps] = useField({
    name: "name",
  });

  return null;
};

const App = () => {
  const [showA, setShowA] = useState(true);

  if (showA) {
    return <A />;
  }

  return <B />;
}

Despite components A and B being mutually exclusive, the above code will result in a runtime error if the showA state is changed to false.

This is because the teardown in useField (A) is called in the same render that the setup in useField (B) is called.