Sync React State with URL Query Parameters

import { useState, useEffect, useCallback } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom'; // Assuming react-router-dom v6

function useUrlState(key, defaultValue) {
  const [searchParams, setSearchParams] = useSearchParams();
  const navigate = useNavigate(); // For potential programmatic navigation if needed

  const urlValue = searchParams.get(key);
  const [state, setState] = useState(() => {
    try {
      return urlValue ? JSON.parse(urlValue) : defaultValue;
    } catch (e) {
      console.error(`Error parsing URL parameter ${key}:`, e);
      return defaultValue;
    }
  });

  // Update URL whenever local state changes
  useEffect(() => {
    const newSearchParams = new URLSearchParams(searchParams.toString());
    if (state !== undefined && state !== null && state !== '') {
      try {
        newSearchParams.set(key, JSON.stringify(state));
      } catch (e) {
        console.error(`Error stringifying state for URL parameter ${key}:`, e);
        // Fallback or ignore
      }
    } else {
      newSearchParams.delete(key);
    }
    setSearchParams(newSearchParams, { replace: true });
  }, [key, state, searchParams, setSearchParams]);

  // Update local state when URL changes externally (e.g., back/forward button)
  useEffect(() => {
    const latestUrlValue = searchParams.get(key);
    try {
      const parsedUrlValue = latestUrlValue ? JSON.parse(latestUrlValue) : undefined;
      // Only update if the URL value is actually different from current state
      // This prevents infinite loops if state changes cause URL update, which then causes state update
      if (JSON.stringify(parsedUrlValue) !== JSON.stringify(state)) {
        setState(parsedUrlValue || defaultValue);
      }
    } catch (e) {
      console.error(`Error parsing URL parameter ${key} on external change:`, e);
      setState(defaultValue);
    }
  }, [key, searchParams, defaultValue, state]);


  // Memoize the setter to ensure stable reference
  const setUrlState = useCallback((newValue) => {
    setState(newValue);
  }, []);

  return [state, setUrlState];
}

export default useUrlState;