Synchronizing Request and Filter Parameters in React

Component.js

import * as React from 'react';
import { useLocation, useHistory } from 'react-router-dom';
import queryString from 'query-string';



export default function Component(props) {
  const history = useHistory();
  const location = useLocation();
  const initSearch = location.search;

  const initialFilter = { param: 'all' };
  const filter = Object.assign({}, initialFilter, queryString.parse(initSearch));

  const filterCopy = JSON.parse(JSON.stringify(filter));
  if (filterCopy.param === 'all' || filterCopy.param === '')
    delete filterCopy.param;

  const newSearch = '?' + queryString.stringify(copyFilter);
  if (initSearch !== newSearch) {
    location.search = newSearch;
    history.replace(location);
  }
}