ESLint warns React Query mutation must be included in dependency array

Question

I am using react-query library and I get ESLint useEffect dependency warning. my code is something like this:

const postProductMutation = useMutation(...);

useEffect(() => {
    postProductMutation.mutateAsync()
}, [])

now, as ESLint says, I should put postProductMutation in dependency array. but if I do, I will create an infinite loop. any solution?

Answer 1

you should destruct the value returned from useMutation and include that in dependency array.

  const { mutateAsync } = useMutation(...);

  useEffect(() => {
    mutateAsync();
  }, [mutateAsync]);