DOM и React Junior Состояние и useState/useReducer обновлено
Производное состояние
Условие
Список items и строка поиска. Показывай отфильтрованные элементы в <li>. Лишнего состояния под результат фильтрации быть не должно.
Что проверяют тесты
показывает всё
фильтрует
реагирует на новые пропсы
Как подойти
Правило: не клади в состояние то, что выводится из другого состояния. Копия в useState рассинхронизируется с пропсами, и появляется useEffect-синхронизатор - лишний рендер и источник багов. Если фильтрация дорогая, оборачивай в useMemo, но состояние всё равно не заводи.
Подсказки: 2
- Результат фильтрации выводится из items и q - его не нужно хранить.
- Всё, что вычисляется из пропсов и состояния, вычисляй прямо в рендере.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация