How to set the value without triggering the watch?

[dninomiya]

I would like to separate the processing between the changes made by programs such as setValue and reset and the changes made by user input.

Do you have a good idea?

const {watch, setValue} = useForm();

useEffect(() => {
  // I want to handle only user-input changes
  watch(value => console.log(value));
}, [watch]);

const action = () => {
  // I don't want to trigger watch in this case
  setValue('foo', 'baa');
}

[bluebill1049]

can you check the event type which returned by the watch?

[dninomiya]

Thank you!

[Effanuel]

What if I wanted to trigger console.log for all updates except one, with the same 'setValue("foo", "bar")' ?

[seleckis]

I have the same question, but I use the hook useWatch. Also I don't get it how to check event type? Seems useWatch does not return any types, just fields values. Any suggestion?

[itsfaraaz]

were you ever able to find a solution?

[BrendanC23]

You can do the following. type represents the input event type, which will be change if the user typed something into an input. When calling form.setValue(), it will trigger the watch callback, which will cause an infinite loop unless you check that the type is change.

value contains all of the form values, but they are all optional. You can call form.getValues() to get the values , which will not make each optional. name is the name of the input that was changed.

export function useWatch(form, cb) {
    const { watch, getValues, setValue, trigger } = form;

    useEffect(() => {
        const subscription = watch((values, { name, type }) => {
            if (!name || type !== "change") return;

            cb(name);
        });

        return () => subscription.unsubscribe();
    }, [watch, getValues, setValue]);
}