Proyectos de Subversion LeadersLinked - SPA

import { useState, useEffect, useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';

export function useDebouncedSearchParam(paramName, debounceDelay = 500) {
  const [searchParams, setSearchParams] = useSearchParams();

  const getQueryFromUrl = useCallback(() => {
    return searchParams.get(paramName);
  }, [searchParams, paramName]);

  const [inputValue, setInputValue] = useState(() => getQueryFromUrl() || '');
  const [debouncedValue, setDebouncedValue] = useState(() => getQueryFromUrl() || '');

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, debounceDelay);

    return () => {
      clearTimeout(handler);
    };
  }, [inputValue, debounceDelay]);

  useEffect(() => {
    setSearchParams((prev) => {
      prev.set(paramName, debouncedValue);
      return prev;
    });
  }, [debouncedValue, paramName, setSearchParams]);

  return { inputValue, setInputValue, debouncedValue };
}