You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 them useEffect 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 with const filter = watch() and then putting filter into useEffect 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:
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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