Синхронизация состояния компонента с URL

Кастомный хук useQueryState инкапсулирует логику синхронизации состояния с URL-параметрами. Данный подход объединяет useState и useSearchParams, очищая код компонента и беря начальное значение из URL.

Для обновления применяется useLayoutEffect, гарантируя изменение адресной строки до отрисовки браузером и исключая визуальную рассинхронизацию.

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

function useQueryState(queryKey, initialValue) {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const [value, setValue] = useState(
    searchParams.get(queryKey) ?? initialValue
  );

  useLayoutEffect(() => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set(queryKey, value);
    setSearchParams(newParams);
  }, [value, queryKey, searchParams, setSearchParams]);

  return [value, setValue];
}

👉 @sWebDev