Как реализовать фильтрацию списка по выбранному фильтру?

Фильтрация списка — это процесс отбора из исходной коллекции только тех элементов, которые удовлетворяют заданному условию. В вебе это типичная задача: пользователь выбирает категорию, статус или диапазон, а интерфейс показывает только подходящие записи. Ключевая идея — не изменять исходные данные, а каждый раз вычислять новое представление на основе текущего фильтра.

Базовый подход в JavaScript

Метод Array.prototype.filter принимает функцию-предикат и возвращает новый массив с элементами, для которых предикат вернул true. Исходный массив остаётся неизменным.

const items = [
  { id: 1, name: 'Ноутбук', category: 'tech' },
  { id: 2, name: 'Книга', category: 'books' },
  { id: 3, name: 'Телефон', category: 'tech' }
];

const filtered = items.filter(item => item.category === 'tech');
// [{ id: 1, ... }, { id: 3, ... }]

Фильтрация в React

В React выбранный фильтр хранят в состоянии через useState, а отфильтрованный список вычисляют прямо в теле компонента или через useMemo. Это гарантирует, что при изменении фильтра компонент перерисуется и покажет актуальные данные.

function List({ items }) {
  const [filter, setFilter] = useState('all');

  const visible = useMemo(() => {
    if (filter === 'all') return items;
    return items.filter(i => i.category === filter);
  }, [items, filter]);

  return (
    <>
      <select onChange={e => setFilter(e.target.value)}>
        <option value="all">Все</option>
        <option value="tech">Техника</option>
      </select>
      <ul>{visible.map(i => <li key={i.id}>{i.name}</li>)}</ul>
    </>
  );
}

Важные детали

• Не мутируйте исходный массив: filter уже возвращает новый, не используйте splice или push.
• Для нескольких условий комбинируйте предикаты через && или цепочку filter.
• Для больших списков применяйте useMemo, чтобы не пересчитывать фильтр на каждый рендер.
• Если фильтрация тяжёлая, выносите её на сервер через query-параметры.

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