Где хранить состояние фильтров списка?

Фильтры списка — это часть состояния приложения, которая определяет, какие данные показываются пользователю. Главный вопрос: где хранить это состояние, чтобы оно было предсказуемым, шарилось ссылкой и не ломалось при навигации. На практике есть три основных места: локальный компонентный стейт, URL (query string) и глобальный стор.

Варианты хранения

• Локальный useState — просто, но фильтры теряются при перезагрузке и не шарятся ссылкой.
• URL query params — фильтры видны в адресе, работают кнопки назад/вперёд, ссылку можно отправить коллеге.
• Глобальный стор (Redux, Zustand, Context) — удобно, если фильтры нужны в разных частях приложения.

Наиболее гибкий подход — сделать URL источником истины, а стор использовать как кэш данных. Тогда при изменении фильтра мы обновляем query string, а компонент читает параметры и делает запрос.

Пример на React с URL как источником истины

import { useSearchParams } from 'react-router-dom';

function Filters() {
  const [params, setParams] = useSearchParams();
  const status = params.get('status') ?? 'all';

  const onChange = (value) => {
    const next = new URLSearchParams(params);
    next.set('status', value);
    setParams(next); // URL обновляется, компонент перерисовывается
  };

  return (
    <select value={status} onChange={(e) => onChange(e.target.value)}>
      <option value="all">Все</option>
      <option value="active">Активные</option>
    </select>
  );
}

Если фильтров много и они используются в нескольких местах, можно синхронизировать URL со стором: при монтировании читаем query params и кладём в Redux, а при изменении фильтра обновляем и стор, и URL. Это даёт единый источник данных для запросов и удобную навигацию.

Итог: для большинства списков оптимально хранить фильтры в URL query params — это даёт шаринг, историю и восстановление состояния. Локальный стейт годится только для временных, неважных фильтров, а глобальный стор — когда фильтры нужны в разных частях приложения.