Which style would you favor when informing parent component of mutation completion?

[mistyharsh]

I have a component which accepts an onComplete prop which is invoked when mutation succeeds:

export function MyComponent() {

  const mutation = useMutation(/* mutation options */);

  useEffect(() => {
    if (mutation.isSuccess) {
      onComplete();
    }
  }, [onComplete, mutation.isSuccess]);

  return (
    <div>Hello</div>
  );
}

However, I recently experimented with directly calling side-effects inside the component render cycle (of-course protected by sufficient conditions) like following:

export function MyComponent() {

  const mutation = useMutation(/* mutation options */);

  if (mutation.isSuccess) {
    onClose();
    mutation.reset();
  }

  return (
    <div>Hello</div>
  );
}

Is this a correct model to think about when using @tanstack/react-query w.r.t. mutations? Do you foresee any issues with this approach considering some of the components may be used in server-side rendering and in React 18 concurrent mode?

[TkDodo]

the rules of react forbid running side effects (callbacks) during render, so 2) is not good. you want:

export function MyComponent() {

  const mutation = useMutation({
    mutationFn,
    onSuccess: onComplete
  });

  return (
    <div>Hello</div>
  );
}

[mistyharsh]

Thanks for @TkDodo for the answer. I use this approach. But, re-reading this particular section of official Effect guide got me into thinking.