Вычисляйте filtered из актуальных items и query при рендере, не дублируя его в state. Для действительно дорогого вычисления можно использовать useMemo с этими зависимостями.
Как убрать производное состояние из React-фильтра?
Вычисляйте filtered из актуальных items и query при рендере, не дублируя его в state. Для действительно дорогого вычисления можно использовать useMemo с этими зависимостями.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Компонент получает items и хранит query. Дополнительно он хранит filtered в state и обновляет его эффектом после изменения items или query. Фильтрация синхронная и не имеет побочных эффектов. Что можно упростить?
Ответ
Вычисляйте filtered из актуальных items и query при рендере, не дублируя его в state. Для действительно дорогого вычисления можно использовать useMemo с этими зависимостями.
Так исчезает промежуточный рендер со старым filtered и дополнительное обновление из эффекта. Сначала измерьте стоимость фильтрации: мемоизация небольшой коллекции может усложнить код без заметной пользы. Не мутируйте переданный items при сортировке результата. Состоянием должны оставаться независимые пользовательские данные, а не копия результата детерминированной формулы.