How to detect completion of router.refresh()

[hiroyukinuri]

I am facing a challenge related to the router.refresh() method. In the recent updates, it appears that the ability to listen to router events has been removed, which has impacted how we can detect the completion of a page refresh initiated by router.refresh().

In my current project, I need to know when router.refresh() has completed its process. The method router.refresh() does not return a promise or have a callback, making it difficult to know exactly when the refresh process has completed.

In standard scenarios, where data updates post-refresh, we can use various techniques like checking for changes in state, global context, or even direct DOM observations. However, these methods fall short in cases where the refreshed page's data remains unchanged - a situation that's not uncommon in many real-world applications.

Looking for a potential solutions, thank you!

[ptts]

This seems to be related to #49810

[ReinforceZwei]

Base on the discussion given by @ptts, I've made a custom hook to return a Promise when the page is refreshing and resolve when the refresh is completed.

import { useRouter } from "next/navigation";
import { useEffect, useState, useTransition } from "react";

/**
 * Wrapper around `router.refresh()` from `next/navigation` `useRouter()` to return Promise, and resolve after refresh completed
 * @returns Refresh function
 */
export function useRouterRefresh() {
    const router = useRouter()
    const [isPending, startTransition] = useTransition()

    const [resolve, setResolve] = useState<((value: unknown) => void) | null>(null)
    const [isTriggered, setIsTriggered] = useState(false)

    const refresh = () => {
        return new Promise((resolve, reject) => {
            setResolve(() => resolve)
            startTransition(() => {
                router.refresh()
            })
        })
    }

    useEffect(() => {
        if (isTriggered && !isPending) {
            if (resolve) {
                resolve(null)
                
                setIsTriggered(false)
                setResolve(null)
            }
        }
        if (isPending) {
            setIsTriggered(true)
        }

    }, [isTriggered, isPending, resolve])

    return refresh
}

Usage

function App() {
    const refresh = useRouterRefresh()
    
    const handle = () => {
        refresh()
            .then(() => {
                // Do something when refresh is done
            })
    }
    
    return ...
}

[LikeDreamwalker]

Well for my scenario is I will call router.refresh() to refresh my RSC part, but sadly I haven't found an official way to get to know the change state after the refresh, which means I could still keep the old React state. This can be critical if you are trying to call refresh outside your context, and it will be more difficult to across the client runtime to notice the context. That's what zustand should do.

However, if you change your idea, you can just pass some unique things to your client components.
Assume your page looks like this:

export default async function Home(props: {
  params: Promise<{ locale: string }>;
}) {
  const params = await props.params;
  const { locale } = params;

  const data = await fetchData();
  return (
    <div>
      <RSC data={data.serverData}> </RSC>
      <ClientComponent data={data.clientData}></ClientComponent>
    </div>
  );
}

You actually could just pass a unique thing, like Date.now(), and because when you call refresh Next.js will try to re-generate the RSC part and keep the React state, so your client component will get the new date, and that's the refresh key:

export default async function Home(props: {
  params: Promise<{ locale: string }>;
}) {
  const params = await props.params;
  const { locale } = params;

  const data = await fetchData();
  return (
    <div>
      <RSC data={data.serverData}> </RSC>
      {/* Add Date.now() to tell client we have been changed */}
      <ClientComponent
        data={data.clientData}
        refreshKey={Date.now()}
      ></ClientComponent>
    </div>
  );
}

And then everything is settled, do anything you want after the route is refreshed:

  const resetTaskList = () => {
    setTaskListData([]);
    setPageNum(2);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  useEffect(() => {
    resetTaskList();
  }, [refreshKey]);