useWatch triggered 10x in v7.59.0 vs v7.54.2

[tparvi]

We are using react hook form v7.54.2. After updating to v7.59.0 the internal call back in useWatch.ts is triggered 10 times more. I have confirmed this by modifying the useWatch.ts to log when callback is called like this:

  useIsomorphicLayoutEffect(
    () =>
      control._subscribe({
        name, // what this watch is interested in
        formState: { values: true },
        exact,
        callback: (formState) => {
          console.log(name); // LOG THE FIELD
          // original logic
          if (!disabled) {
            updateValue(
              generateWatchOutput(
                name as InternalFieldName | InternalFieldName[],
                control._names,
                formState.values || control._formValues,
                false,
                _defaultValue.current,
              ),
            );
          }
        },
      }),
    [name, control, disabled, exact],
  );

I did the similar change in the v7.54.2 branch and the callback is triggered exactly 10 times more in the new version. We have a quite large form and this performance drop is noticable.

The form has quite a bit of logic like:

• If field X changes then field B can only have these values
• if field X changes then update field Z to this value
• if field X changes then trigger validation of these fields

We are using useWatch and rules.deps to notify different parts of the UI of these changes and we also have lot of nested fields and updates to those fields.

I am wondering is this a regression or was the useWatch implementation changed to be a lot more aggressive in order to maybe fix some issues where it was not triggered correctly?

[tparvi]

Looking at the source code it seems useEffect was used previously and now uselayoutEffect is used. React docs: https://react.dev/reference/react/useLayoutEffect

useLayoutEffect can hurt performance. Prefer useEffect when possible.

The PR in question does have explanation why that change was made #12786

[tparvi]

I am not sure if this is related but I was able to reproduce issue related to useWatch where it is triggered even though totally unrelated field changes. #12925

[joshkel]

I believe it's an unintended consequence of a change in 7.55. I've opened a PR to restore the previous behavior: #12945