Как исправить чекбоксы фильтра с мутацией массива state?

Условие

В React выбранные теги хранятся как const [selected,setSelected] = useState([]). Обработчик делает selected.push(id); setSelected(selected), а checkbox получает defaultChecked. После клика состояние отображается ненадёжно. Реализуйте переключение выбранного id.

Ответ

Нужно создавать новый массив через функциональное обновление и передавать checkbox контролируемый checked. DefaultChecked задаёт только начальное состояние и не синхронизирует последующие изменения.

const toggle = id => setSelected(prev =>
  prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
);
// внутри списка тегов:
<input type="checkbox" checked={selected.includes(tag.id)}
  onChange={() => toggle(tag.id)} />

Функциональное обновление использует актуальное предыдущее значение при серии изменений. Стабильный key по tag.id сохраняет соответствие строк. Вынесенный useTagFilter может возвращать selected и toggle, не отдавая наружу возможность мутировать внутренний массив.

Источник: react.dev.