Using useRef for unmounting & unergistering

[ShahriarKh]

In the docs (https://react-hook-form.com/api/useform/unregister), we have:

Make sure you unmount that input which has register callback or else the input will get registered again.

const [show, setShow] = React.useState(true)

const onClick = () => {
  unregister('test');
  setShow(false); // make sure to unmount that input so register not invoked again.
}

{show && <input {...register('test')} />}

Another solution is to use useRef, especially for cases when the existence of the component is not controlled by itself. For example, an input might be deleted by clicking a button inside another component. For these, I recommend adding this example to docs:

export default function CustomInput({ inputName }) {
  const { register, unregister } = useFormContext();
  const mounted = useRef(false);
  
  useEffect(() => {
    mounted.current = true;
    return () => {
      unregister(inputName);
      mounted.current = false;
    };
  }, []);
  
  return (
    {mounted.current && (
      <input {...register(inputName)} />
    )}
  )
}

If you think it's okay, tell to open a PR in /docs repo.

[bluebill1049]

thanks for sharing the solution. perhaps we can kee this discussion here as a knowledge sharing.

[Moshyfawn]

Just a question: doesn't shouldUnregister solve this on it's own?

[ShahriarKh]

Nice question! I wasn't aware of this prop 🙃
Well, if it's already supported out-of-the-box, then there's no need to handle this manually. Thanks.