Trigger mutation once at component mount

[Sagie501]

Hi!

I have a mutation which I wants to trigger when the component mount. Since I am using StrictMode this code isn't enough:

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

useEffect(() => {
    myMutation.mutate();
}, []);

StrictMode mount the component then unmount it and mount it once again which cause the mutation to run twice.

So I thought about this as a solution:

const isMutationHasRun = useRef(false);
const myMutation = useMutation({...});

useEffect(() => {
    if (!isMutationHasRun.current) {
        isMutationHasRun.current = true;
        myMutation.mutate();
    }
}, []);

This is works as expected and triggers the mutation only once.

However, when I am using myMutation.data later in the component I am not getting my data from the response. I guess that this is happen because the mutation ran on the first mount, and then the component unmount and mount again so I am getting a new useMutation instance.

Do you have any suggestion how to overcome this issue (without removing StrictMode)?

[Sagie501]

So I found this discussion which basically the same as the one that I opened.

I think that @TkDodo comment explains it pretty well.