useLocation and useHistory inside useEffect

[PawelMorawian]

Hi,

I am trying to create a hook that takes a state as a parameter and pushed its content as URL search parameters.

This is my code so far:

function useURLFilters(urlFilters) {
  const location = useLocation();
  const history = useHistory();
  useEffect(() => {
    const search = new URLSearchParams(urlFilters);
    history.replace({ ...location, search: search.toString() });
  }, [urlFilters, history]);
}

I call this hook with:

function Component() {
  const [filters, setFilter] = useState({});
  useURLFilters(filters);
  return <p>{/* logic to modify filters*/}</p>
}

This code works, but I get an eslint warning: React Hook useEffect has a missing dependency: 'location'. Either include it or remove the dependency array
When I add the location to the dependency hook, the hooks fstops working and I get the following error: SecurityError: The operation is insecure.

Could someone please explain to me why I can't add location to the dependency hook and tell if my code is valid and I can just ignore the warning.

Thank you