Infinite loop: mixing watch, useEffect and setState

Describe the bug Not sure if this is a bug or if I’m missing something. I’m using a few Controllers to control custom components (custom inputs) and I want to detect whenever the whole form data changes so I can filter/process it.

Using watch() as a dependency of useEffect and using state inside of it causes an infinite loop.

To Reproduce

https://codesandbox.io/s/react-hook-form-infinite-loop-hx32d?file=/src/App.js

Uncomment the “setFilters()” to reproduce the infinite loop. Without it, it’s all good.

[ambewas]

We’re noticing a similar problem - we’re using watch to access a value and pickup changes to it. The value is from react-select and is thus an object ( { value: 'foo', label: 'bar'} ).

We’re having to set some local state using useState depending on which element was selected. So we’ve got a hook doing something like this:

const { localState, setLocalState } = useState();
const watchedObject = watch('somePath');

useEffect(() => {
  setLocalState(watchedObject);
}, [watchedObject])

in the browser, this runs fine, persumably because watchedObject is the same reference everytime – but for some reason in our specs, this triggers an infinite loop - (to specify our use case: we’re changing a part of the form that is rendered based on localState - and we’re having to put it in localState instead of relying on watch alone, because we’re using the value in localState to change the schema passed to useForm. )

We’ve solved this with comparing localState with watchedObject – but it’s kinda not ideal to write code just to make specs pass.

const { localState, setLocalState } = useState();
const watchedObject = watch('somePath');

useEffect(() => {
  if (isNotTheSameByDeepCompare(localState, watchedObject)) {
    setLocalState(watchedObject);
  }
}, [watchedObject])

Any advice on how to improve this workaround with an official solution would be much appreciated 👍

[hosamre94]

Watched values doesn’t gets memories, that’s the issue here. I wouldn’t use watch return value as useEffect dep.

for me i don’t think this is the case, the useEffect works fine it’s only got triggered whenever a value inside the form is changed , but the problem is each setValue inside the useEffect is triggering the watch again which call the setValue again so on and so forth i have infinite loop