Техпрогон
ВойтиНачать бесплатно
Выбор ответа Junior Состояние и useState/useReducer обновлено

sort и state

Вопрос

Кнопка «Сортировать» не меняет порядок на экране. Какое исправление верное?

function sortByName() {
  items.sort(byName);
  setItems(items);
}

Попробуйте сами

Выберите вариант, и откроется разбор.

Показать ответ и разбор

Коротко

Правильный ответ: setItems(items.toSorted(byName)). sort сортирует массив на месте и возвращает ту же ссылку, поэтому React не видит изменения (и заодно мутирован текущий state). toSorted (ES2023) возвращает новый массив.

Варианты ответа

  1. Вызвать setItems(items) дважды подряд
  2. setItems(items.toSorted(byName))правильный ответ
  3. Добавить key={items.length} на список
  4. Обернуть items.sort(byName) в useMemo

Разбор

sort сортирует массив на месте и возвращает ту же ссылку, поэтому React не видит изменения (и заодно мутирован текущий state). toSorted (ES2023) возвращает новый массив. Повторный вызов с той же ссылкой ничего не меняет. key и useMemo к причине отношения не имеют.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.

Потренироваться бесплатно

Предыдущий вопрос

setState в теле компонента

Следующий вопрос

Как спроектировать state

Урок по теме

useState и useReducer без сюрпризов

Термины по теме

Батчинг обновлений stateЛенивая инициализация в useStateФункциональное обновление setX(prev => ...)useReducer

Ещё по теме «Состояние и useState/useReducer»

Все вопросы модуля