wsmd/react-use-form-state

setField in useEffect dependency causes infinite loop

keeganstothert opened this issue · 3 comments

keeganstothert commented

eslint automatically adds setField as a dependency in any useEffect that uses it. This causes an infinite loop. currently using // eslint-disable-next-line to prevent this behaviour. react-use-form-state isn't the only library i've seen that causes this so maybe it's something on my end or my understanding of hooks, but I feel like setField should be stable the same way dispatch in redux is a stable dependency

alterx commented

Here's a simple CodeSandbox that shows the issue:

https://codesandbox.io/s/amazing-germain-k2gy0

philipeatela commented

I guess it makes sense that running setField should be a stable dependency (don't know much about how to achieve this) but there is a possible workaround for the situation displayed on the codesandbox posted by @alterx

You can add a condition inside the fetchData method to run your fetch + setField only if: a) The current input form fields are empty; b) Neither of them have been touched by the user yet

This way I believe it works as expected with no eslint errors.
Codesandbox: https://codesandbox.io/embed/gifted-haibt-13o4f

wsmd commented

This issue is now fixed in v0.12.0! 🎉

  • 🎉3