Synchronize React State with URL Parameters

Use useSyncExternalStore to synchronize React state with query parameters in the URL, making the component respond to URL changes.
import { useSyncExternalStore } from 'react';
import { useLocation, useHistory } from 'react-router-dom';

// Custom hook to synchronize React state with URL query parameters
function useQueryParams(key, defaultValue) {
  const location = useLocation();
  const history = useHistory();

  // Parse query parameters
  const queryParams = new URLSearchParams(;

  const state = queryParams.get(key) || defaultValue;

  // Update URL when state changes
  const setState = (newState) => {
    queryParams.set(key, newState);

  // Subscribe to perist changes
  const subscribe = (callback) => {
    return history.listen(() => {
      if (queryParams.get(key) !== state) {

  // Synchronize React state with the URL parameter
  const value = useSyncExternalStore(
    () => queryParams.get(key) || defaultValue

  return [value, setState];
This custom hook uses useSyncExternalStore to synchronize React state with a specific query parameter from the URL. By using useLocation and useHistory from react-router-dom, it listens to changes in the URL and updates the component's state accordingly. Additionally, it provides a setState function to update the URL when the state changes.