useWatch as a component

[poulet42]

Is your feature request related to a problem? Please describe.

It happens quite often in dynamic forms that some field is displayed / hidden based on the value of another field. To implement something like this, we can either use the watch return from useForm or the useWatch hook.

The issue with using watch is that the re-renders are not isolated to only the component that needs the data.

useWatch allow us to subscribe to a value and isolate re-render, but we have to extract the conditional rendered field in its own component, making it unclear by looking at the form one field will be displayed / hidden based on another field value.

Describe the solution you'd like

It would be nice for RHF to also expose a Watch component, which would be a thin wrapper around the useWatch hook, but allow to compose without having to break down in multiple components:

const { register } = useForm({ ... });

 return (
  <form>
    <input type="checkbox" {...register('hasPet')} />
    <Watch name="hasPet">
      {(hasPet) => hasPet ? <input type="text" {...register('petName') /> : null}
    </Watch>
  </form>

[BrendanC23]

This seems like something that can be done in user-land pretty easily. Is there a reason that it's better to incorporate it in the library itself?

Would something like this work?

function Watch({ name, control, children }) {
  const value = useWatch({ name, control });

  return children(value);
}

[poulet42]

@BrendanC23 the js version is quite straightforward, but there are 7 different signature overloads for useWatch, making it very hard to type a wrapper component properly :(

[BrendanC23]

This ended up getting implemented. See the PR. It's been released in version 7.65.0.