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 utilsutils, utils.userutils.user and utils.user.exampleutils.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.

tRPC•2y ago•

3 replies

Catlike

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]);

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

tRPC

Move Fast & Break Nothing. End-to-end typesafe APIs made easy.

4,951 Members

Join

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

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

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads