I have a custom hook called useAxios. This is actually a wrapper for a useQuery hook that either returns the cached axios instance, or creates a new one by refreshing the JWT.

Now if I create a mutation that relies on this axios instance:

export function useExampleMutation() {
  const axios = useAxios();
  return useMutation((thing) => 
     axios.post(`/do-something-cool/${thing}`)
  )
}

Now, as far as I understand, when I use it, the mutate function is referentially stable:

export function ExampleComponent() {

  const exampleMutation = useExampleMutation();

  useEffect(() => {
    // ...
  }, [exampleMutation.mutate]) //
  //                  ^^^^^^ This is referentially stable 

  return <div>...</div>
}

So the useEffect hook won't be triggered with every render.

But I wouldn't want this to be the case if the token is refreshed and I get a brand new axios instance. So how would I specify that I should get a new instance whenever it does like if it were a regular callback:

export function useExampleCallback() {
  const axios = useAxios();
  return useCallback((thing) => 
     axios.post(`/do-something-cool/${thing}`), 
  [axios])
}