useUtils changes at every render and causes useEffect to be called continuously
I have a context provider where I need to invalidate a query on unmount. So I wrote this piece of code:
Howerver, the cleanup function is called continuously when other fields of the context provider changes even without involving trpc. I also tried to use as dependency
utils
, utils.user
and utils.user.example
.
A workaround coul be to pass []
as dependencies and then make an exception on eslint, but it would be nice if useUtils would return the same instance instead of changing at every render.2 Replies
I'm not sure if it's documented somewhere, I might have read through the code trying to answer this, but I think your dependency should be the result of
useUtils
only. The result of useUtils
is a Proxy
object and the useUtils
property is specially handled to memoize the context result. Accessing other properties on the proxy creates a new reference every time you access the property.
e.g.
Thanks for the response! I'm pretty sure I tried to use "utils" as dependency but the problem persisted - I'll give a double check, maybe I missed something