Неизменяемое обновление данных
Вопрос
Зачем во фронтенде обновлять данные неизменяемо и как вы это делаете с массивами и вложенными объектами?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
React, Redux и мемоизация сравнивают по ссылке: мутация не меняет ссылку и не вызывает обновление
Неизменяемость делает изменения предсказуемыми: история, отмена, отладка
Массивы: `map`/`filter`/spread вместо `push`/`splice`, `toSorted`/`with` вместо `sort` и присваивания по индексу
Вложенные объекты: копировать каждый уровень на пути к изменению
Для глубокой вложенности: Immer (встроен в Redux Toolkit) или нормализация данных
Цена: лишние аллокации, но копируется только путь, остальное переиспользуется
Что могут спросить следом
- Как обновить поле объекта внутри массива по id?
- Как Immer позволяет писать «мутирующий» код?
- Почему
sortна массиве из состояния опасен?
Разбор
Образцовый ответ: «Во фронтенде изменения обнаруживают по ссылке: React сравнивает состояние через Object.is, memo и селекторы сравнивают пропсы так же. Если я мутирую массив через push, ссылка та же, и React не перерисует компонент. Ещё неизменяемость делает изменения явными: проще отлаживать, хранить историю и делать отмену. С массивами я использую методы, которые возвращают новый массив: добавление через spread, удаление через filter, замену через map, а сортировку через toSorted вместо sort, потому что sort мутирует оригинал. Для вложенных структур копирую каждый уровень на пути: { ...state, user: { ...state.user, name } }. Остальные ветки переиспользуются по ссылке, поэтому это дёшево. Когда вложенность глубокая, беру Immer: пишу код как будто мутирую черновик, а он собирает новую структуру. Ещё лучше нормализовать данные, чтобы глубина была небольшой».
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.