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:

const utils = trpc.useUtils();
useEffect(() => (
    () => utils.user.example.invalidate()
), [utils.user.example.invalidate]);

const utils = trpc.useUtils();
useEffect(() => (
    () => utils.user.example.invalidate()
), [utils.user.example.invalidate]);

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

utils.user

utils.user

and

utils.user.example

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.

useUtils changes at every render and causes useEffect to be called continuously

Similar Threads