useEffect optimized watch #10922
Unanswered
AndrewBoklashko
asked this question in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello
I've been recently migrating a project with dozens complex froms from formik to RHF. I am very satisfied with the results, the responsiveness is much higher now and I also like the TypeScript safety that library provides.
One of the hardest issues was to make RHF
watch
to behave like formik values, i.e. make themuseEffect
optimized since a lot of code was relying on that behavior. For example, I have multiple forms which act as a filter for data tables, anytime the filter field changes the data table source must be refetched. When trying to implement that withconst filter = watch()
and then putting filter intouseEffect
which represents the data source I get infinite loops.So what I ended up doing is to wrap RHF
watch
with a decorator and leverage caching + deep equality comparison to return previous value reference if new value is structurally the same:From my initial testing such approach works very well for me and I am able to avoid infinite loops. The point of this discussion is:
watch
API, that's not clear to me at allwatchMode: "render-optimized" | "effect-optimized"
Beta Was this translation helpful? Give feedback.
All reactions