Next.js custom hook to wrap the next/router events so we keep it DRY

Next.js useRouterHooks

import { useRouter } from "next/router";
import { useCallback, useEffect } from "react";

function useRouterHooks({
  onRouteChangeStartHandler,
  onRouteChangeCompleteHandler,
  onRouteChangeErrorHandler,
  onBeforeHistoryChangeHandler,
  onHashChangeStartHandler,
  onHashChangeCompleteHandler,
}: Partial<{
  onRouteChangeStartHandler: (url: string, { shallow }: { shallow: boolean }) => void;
  onRouteChangeCompleteHandler: (url: string, { shallow }: { shallow: boolean }) => void;
  onRouteChangeErrorHandler: (err: { cancellable: boolean }, url: string, { shallow }: { shallow: boolean }) => void;
  onBeforeHistoryChangeHandler: (url: string, { shallow }: { shallow: boolean }) => void;
  onHashChangeStartHandler: (url: string, { shallow }: { shallow: boolean }) => void;
  onHashChangeCompleteHandler: (url: string, { shallow }: { shallow: boolean }) => void;
}>): void {
  const onRouteChangeStart = useCallback(
    (url: string, { shallow }: { shallow: boolean }) => {
      if (onRouteChangeStartHandler) {
        onRouteChangeStartHandler(url, { shallow });
      }
    },
    [onRouteChangeStartHandler]
  );
  const onRouteChangeComplete = useCallback(
    (url: string, { shallow }: { shallow: boolean }) => {
      if (onRouteChangeCompleteHandler) {
        onRouteChangeCompleteHandler(url, { shallow });
      }
    },
    [onRouteChangeCompleteHandler]
  );
  const onRouteChangeError = useCallback(
    (err: { cancellable: boolean }, url: string, { shallow }: { shallow: boolean }) => {
      if (onRouteChangeErrorHandler) {
        onRouteChangeErrorHandler(err, url, { shallow });
      }
    },
    [onRouteChangeErrorHandler]
  );
  const onBeforeHistoryChange = useCallback(
    (url: string, { shallow }: { shallow: boolean }) => {
      if (onBeforeHistoryChangeHandler) {
        onBeforeHistoryChangeHandler(url, { shallow });
      }
    },
    [onBeforeHistoryChangeHandler]
  );
  const onHashChangeStart = useCallback(
    (url: string, { shallow }: { shallow: boolean }) => {
      if (onHashChangeStartHandler) {
        onHashChangeStartHandler(url, { shallow });
      }
    },
    [onHashChangeStartHandler]
  );
  const onHashChangeComplete = useCallback(
    (url: string, { shallow }: { shallow: boolean }) => {
      if (onHashChangeCompleteHandler) {
        onHashChangeCompleteHandler(url, { shallow });
      }
    },
    [onHashChangeCompleteHandler]
  );

  const router = useRouter();

  useEffect(() => {
    router.events.on("routeChangeStart", onRouteChangeStart);
    router.events.on("routeChangeComplete", onRouteChangeComplete);
    router.events.on("routeChangeError", onRouteChangeError);
    router.events.on("beforeHistoryChange", onBeforeHistoryChange);
    router.events.on("hashChangeStart", onHashChangeStart);
    router.events.on("hashChangeComplete", onHashChangeComplete);

    return () => {
      router.events.off("routeChangeStart", onRouteChangeStart);
      router.events.off("routeChangeComplete", onRouteChangeComplete);
      router.events.off("routeChangeError", onRouteChangeError);
      router.events.off("beforeHistoryChange", onBeforeHistoryChange);
      router.events.off("hashChangeStart", onHashChangeStart);
      router.events.off("hashChangeComplete", onHashChangeComplete);
    };
  }, [router]);
}

export default useRouterHooks;