URL как состояние

Часть состояния описывает то, на что смотрит пользователь, — это состояние относится в URL, а не в useState. Выбор фильтра, активная вкладка, текущая страница, поисковый запрос: все они отвечают на «какой это вид?». URL существует ровно для того, чтобы закодировать текущий вид как адресуемую, копируемую строку. Помещение этого состояния в useState делает его невидимым для адресной строки — поэтому им нельзя поделиться, сохранить в закладки или восстановить.

// useState: вид приватен для этого рендера. Обнови — и его нет;
// скопируй URL — и получатель увидит другой вид.
const [category, setCategory] = useState("all");
const [sort, setSort] = useState("popular");

Тест: если я скопирую этот URL в другую вкладку, должна ли страница выглядеть так же? Если да, это состояние относится в URL.

Читай состояние из параметров поиска и считай URL источником истины — а не копией useState. В App Router useSearchParams возвращает доступный только для чтения URLSearchParams; ты выводишь свой вид напрямую из него. Нет второго useState, зеркалящего значение, поэтому нечего держать в синхронизации.

"use client";
import { useSearchParams } from "next/navigation";

function ProductList() {
  const params = useSearchParams();
  const category = params.get("category") ?? "all";   // URL — источник
  const sort = params.get("sort") ?? "popular";
  return <Grid items={query(category, sort)} />;       // UI = f(состояние URL)
}

Заметь форму: UI = f(state) по-прежнему держится, но state теперь живёт в URL. Компонент — чистая функция от параметров поиска: его можно обновить и сделать ссылкой, потому что весь его вход — в адресной строке.

Записывай состояние, обновляя URL, — это навигация, — так что назад/вперёд и обновление приходят бесплатно. Чтобы сменить фильтр, ты проталкиваешь новый URL; роутер перерисовывает страницу с новыми параметрами поиска, а браузер записывает запись в историю. Ты никогда не вызываешь setState для этого значения. Строй следующую строку запроса из текущих параметров, чтобы изменить один ключ, не затирая остальные.

"use client";
import { useSearchParams, useRouter, usePathname } from "next/navigation";

function CategoryFilter() {
  const params = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  function setCategory(next: string) {
    const q = new URLSearchParams(params);   // начни с текущего URL
    q.set("category", next);                  // измени один ключ
    router.push(`${pathname}?${q}`);          // навигация, а не setState
  }
  return <Select value={params.get("category") ?? "all"} onChange={setCategory} />;
}

Поскольку каждое изменение — настоящая навигация, кнопка «Назад» переходит к предыдущему фильтру, а перезагрузка восстанавливает точный вид — поведение, которое иначе пришлось бы пересобирать руками через useState + localStorage + эффекты.

Режим отказа: проталкивание временного частого состояния в URL засоряет историю и перерисовывает на каждое изменение. URL — правильный дом для зафиксированного, низкочастотного состояния вида. Он — неправильный дом для значения поля ввода на каждое нажатие клавиши, наведения, наполовину открытого выпадающего списка или позиции перетаскивания. Каждый router.push — навигация: он добавляет запись в историю (так один поиск «обувь» становится пятью нажатиями «Назад» — о, об, обу, обув, обувь) и перерисовывает поддерево маршрута на каждое изменение.

// НЕВЕРНО: каждое нажатие клавиши — навигация. История теперь мусор, и
// весь маршрут перерисовывается на каждый символ.
function Search() {
  const router = useRouter(), pathname = usePathname();
  return <input onChange={(e) => router.push(`${pathname}?q=${e.target.value}`)} />;
}

Исправление — разделить хранилище по частоте: держи живое значение ввода в локальном useState (временное, быстрое, приватное), а фиксируй в URL только на debounce или при сабмите — и используй router.replace (без записи в историю) вместо push для инкрементальных фиксаций. URL хранит зафиксированный запрос; useState хранит нажатия клавиш.