React useSearchParam hook

Angelos Chalaris · React, Hooks, State, Effect · Oct 13, 2021

Tracks the browser's location search param.

  • Use the useCallback() hook to create a callback that uses the URLSearchParams constructor to get the current value of param.
  • Use the useState() hook to create a state variable that holds the current value of the param.
  • Use the useEffect() hook to set appropriate event listeners to update the state variable when mounting and clean them up when unmounting.
const useSearchParam = param => {
  const getValue = React.useCallback(
    () => new URLSearchParams(window.location.search).get(param),
    [param]
  );

  const [value, setValue] = React.useState(getValue);

  React.useEffect(() => {
    const onChange = () => {
      setValue(getValue());
    };

    window.addEventListener('popstate', onChange);
    window.addEventListener('pushstate', onChange);
    window.addEventListener('replacestate', onChange);

    return () => {
      window.removeEventListener('popstate', onChange);
      window.removeEventListener('pushstate', onChange);
      window.removeEventListener('replacestate', onChange);
    };
  }, []);

  return value;
};
const MyApp = () => {
  const post = useSearchParam('post');

  return (
    <>
      <p>Post param value: {post || 'null'}</p>
      <button
        onClick={() =>
          history.pushState({}, '', location.pathname + '?post=42')
        }
      >
        View post 42
      </button>
      <button onClick={() => history.pushState({}, '', location.pathname)}>
        Exit
      </button>
    </>
  );
};

ReactDOM.render(<MyApp />, document.getElementById('root'));

Recommended snippets