How to run a function after all the revalidation has been completed?

[joulev]

See https://github.com/joulev/debug/tree/swr-after-mutating.

Currently I have this

export default function Home() {
  const { data, mutate, isValidating } = useSWR<{ date: string }>("/api/now", fetcher);
  const doThisAfterMutating = () => {
    const obj = { isValidating, date: data?.date ?? "no data" };
    alert(JSON.stringify(obj));
  };
  async function handleMutate() {
    await mutate();
    doThisAfterMutating();
  }
  if (!data) return <div>Loading...</div>;
  return (
    <div>
      <div>Now: {data.date}</div>
      <button onClick={handleMutate}>Refresh</button>
    </div>
  );
}

What happens is that when alert is called, while isRevalidating is false, the data in obj is still the old data. Only after I close the alert will data be assigned the new values.

How do I ensure that the function doThisAfterMutating will run after data.date has been updated?

---

This is actually an XY problem. In my original use case, doThisAfterMutating doesn't need the value of data (so I don't really need the promise returned by mutate()), but will execute something like setIsLoading(false) after the data has been fully revalidated. Currently that would lead to some split second where loading === false while the rendered data is still the old data. I want to ensure that setIsLoading(false) is only called after everything is fully rerendered.

[danwayne-me]

I think the root cause is that your doThisAfterMutating callback has captured the stale value of data and isValidating, why not use data and isValidating to calculate the isLoading on the fly during render?