React hook guideline implementation to update the URL with a debounce in Next.js

useKeepBrowserPathUpdated.ts

function getBrowserPath(params) {
  // your implementation here
}

const URL_UPDATE_DELAY = 750;

export default function useKeepBrowserPathUpdated(params) {
  const path = getBrowserPath(params);

  useEffect(() => {
    // the timeout adds a small delay to reduce the errors logged
    // by Next when a navigation is interrupted
    const timeout = setTimeout(() => {
      Router.replace(
        path,
        undefined,
        { shallow: true } // optimistic shallow true
      );
    }, URL_UPDATE_DELAY);

    return function cleanUp() {
      clearTimeout(timeout);
    };
  }, [path]);
}