Since v7.55 (~ v7.62.0), the behavior of useWatch has changed ?

[flameddd]

Hi folks

I notice, since v7.55 (~ v7.62.0), useWatch behavior has changed

When watching an Object, calling handleSubmit now triggers useWatch —something that didn’t happen in v7.54.2.

Is this an intentional breaking change or a bug?

I’ve seen some discussion and PR ( #12945 ), but the same issue still exists in v7.62.0.

Here is reproduction repo. sample code and screenshots are shown below.

---

Demo repo: https://github.com/flameddd/react-hook-form-useWatch_issue

code: https://github.com/flameddd/react-hook-form-useWatch_issue/blob/main/src/App.jsx

import { useEffect, memo } from 'react'
import { useForm, useWatch } from "react-hook-form755" // v7.55.0, behavior changed

const defaultName = { label: 'default label' }
const defaultValues = { name: defaultName }

function App() {
  const { register, handleSubmit, control } = useForm({
    defaultValues,
  });

  return (
    <div>
      <div>
        <h1>react-hook-form <b>v7.55.0</b></h1>
        <form onSubmit={handleSubmit(
          data => console.log("==== onSubmit called ====", data),
          console.error
        )}>
          <input {...register("name")} />
          <button type="submit">Submit</button>
        </form>
      </div>
      <OtherField control={control} />
    </div>
  )
}

const OtherField = memo(({ control }) => {
  // !! useWatch will fire and return new Reference Object when Submit clicked
  const watchName = useWatch({ control, name: "name" }); 

  console.log("==== useWatch triggered ====: ", watchName === defaultName);

  useEffect(() => {
    console.log("==== useEffect triggered ====");
    // resetField('OtherFieldName')
  }, [watchName]);

  return null
})


export default App

v7.55.0 when click Submit button

v7.62.0 when click Submit button

v7.54.2 when click Submit button

Thank react-hook-form so much !!!

[giaBaoJS]

Yes, it changed, and it was a bug. It's fixed in 7.75.0.

7.55.0 merged _subjects.values into _subjects.state, and shouldRenderFormState had a size check that let any state emission reach a subscriber with the same number of subscribed keys:

Object.keys(formState).length >= Object.keys(_proxyFormState).length

handleSubmit emits three state updates and none of them carry a values key. { isSubmitting: true } is one key, useWatch subscribes with { values: true }, also one key, so 1 >= 1 passed with zero key overlap. #13398 put that branch behind isRoot, so only the root useForm subscriber gets it now.

Your repro, memo'd child, one click on Submit, child render count before and after:

7.54.2   1 -> 1
7.55.0   1 -> 3
7.62.0   1 -> 3
7.66.0   1 -> 3
7.74.0   1 -> 3
7.75.0   1 -> 1
7.87.0   1 -> 1

One aside on the log line itself: watchName === defaultName is false even on the very first render, in 7.54.2 too. useForm deep clones defaultValues into its internal values, so useWatch never gives you back the original object. Render count is the thing to measure here, not identity.