use-optimistic-search-params.ts

import { useLocation, useNavigation, useSearchParams } from "@remix-run/react";
import { useCallback, useMemo } from "react";

export function useOptimisticSearchParams() {
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();
  const navigation = useNavigation();

  const nextSearchParams = useMemo(() => {
    if (navigation.location?.pathname === location.pathname) {
      return new URLSearchParams(navigation.location.search);
    }

    return undefined;
  }, [
    location.pathname,
    navigation.location?.pathname,
    navigation.location?.search,
  ]);

  const optimisticSearchParams = nextSearchParams ?? searchParams;

  // When the set state function is called with a function, it needs to recieve
  // the optimistic search parameters.
  const setOptimisticSearchParams = useCallback<typeof setSearchParams>(
    (nextInit, navigateOptions) => {
      setSearchParams(
        typeof nextInit === "function"
          ? nextInit(
              // Pass `nextInit` a copy so it can safely mutate it.
              new URLSearchParams(optimisticSearchParams),
            )
          : nextInit,
        navigateOptions,
      );
    },
    [optimisticSearchParams, setSearchParams],
  );

  return [optimisticSearchParams, setOptimisticSearchParams] as const;
}