harsh-harlequin

eslint rule to prevent passing object returned by `useMutation` into hook dependency array?

I hit the issue that the object returned by useMutation is not stable a few times (see also https://github.com/TanStack/query/issues/1858) What do you think about adding an eslint rule that detects the following

 const mutate = useMutation(...);

 const handleClick = useCallback(() => {
    mutate();
  }, [mutate]); // <-- This should trigger the ESLint error

 const mutate = useMutation(...);

 const handleClick = useCallback(() => {
    mutate();
  }, [mutate]); // <-- This should trigger the ESLint error

GitHub

Issues · TanStack/query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - Issues · TanStack/query

5 Replies

harsh-harlequinOP•16mo ago

I went ahead and created that plugin: https://github.com/TanStack/query/pull/7911

GitHub

feat(eslint-plugin-query): add rule that disallows putting the resu...

I stumbled across #1858 a few times, so I wrote this eslint plugin. It will detect if the return value of useMutation is directly put in a React hook dependency array.

ratty-blush•16mo ago

Very nice! Should this also include the query object?

harsh-harlequinOP•16mo ago

do you mean the return value of useQuery? does it have the same issue of not being referentially stable?

ratty-blush•16mo ago

I thought this was mentioned in the linked issue

harsh-harlequinOP•16mo ago

i generalized the rule now if you have name suggestions, let me know. the no-unstable-query-mutation-in-deps is a bit bulky

Gaming

Programming

eslint rule to prevent passing object returned by `useMutation` into hook dependency array?

Did you find this page helpful?