managing state in url

useSearchParamState.tsx

import { useRouter, useSearchParams, usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

type UseSearchParamStateReturn<T> = [T, (newValue: T) => void];

const useSearchParamState = <T>(param: string, defaultValue: T): UseSearchParamStateReturn<T> => {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [value, setValue] = useState<T>(defaultValue);

  useEffect(() => {
    const paramValue = searchParams.get(param);
    if (paramValue !== null) {
      try {
        const parsedValue = JSON.parse(paramValue);
        setValue(parsedValue);
      } catch (error) {
        console.error('Failed to parse search param:', error);
      }
    }
  }, [searchParams, param]);

  const updateSearchParam = (newValue: T) => {
    const stringifiedValue = JSON.stringify(newValue);
    const newSearchParams = new URLSearchParams(searchParams.toString());
    newSearchParams.set(param, stringifiedValue);
    router.replace(`${pathname}?${newSearchParams.toString()}`);
    setValue(newValue);
  };

  return [value, updateSearchParam];
};

export default useSearchParamState;