A custom hook to save last query search in local storage

useLastSearch.ts

import { useEffect } from "react";

import { useLocation } from "react-router";
import { useNavigate } from "react-router-dom";

import { useLocalStorage } from "usehooks-ts";

// A hook to save last search query and load it again when `loadLastSearch` is received in location state
// Useful to save table state and load it when user click on custom in-page back button
export const useLastSearch = (key: string, isDisabled?: boolean) => {
  const [lastSearch, setLastSearch] = useLocalStorage(`${key}/last-search`, "");

  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (isDisabled) {
      return;
    }

    if (location.state?.loadLastSearch) {
      navigate(location.pathname + lastSearch, { replace: true });
    } else {
      setLastSearch(location.search);
    }
  }, [isDisabled, lastSearch, location, navigate, setLastSearch]);
};