Зачем компонентам чистота
Вопрос
Почему React требует, чтобы рендер был чистым? Что сломается, если в теле компонента менять внешние данные?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Рендер может вызываться сколько угодно раз и в любой момент, на это нельзя полагаться
Конкурентный рендер может прервать и выбросить незавершённый рендер
StrictMode в dev вызывает компонент дважды, чтобы поймать нарушения
Мутация внешних переменных даёт разный результат при повторном вызове
React Compiler и мемоизация опираются на чистоту
Побочные эффекты место в обработчиках событий и эффектах
Что могут спросить следом
- Как найти нечистый рендер в существующем коде?
- Можно ли мутировать локальную переменную, созданную в этом же рендере?
- Что ещё StrictMode делает с эффектами?
Разбор
React считает компонент функцией от props, state и context. Это даёт ему свободу: вызывать рендер повторно, прерывать его ради срочного обновления, выбрасывать результат, пропускать его через мемоизацию. Если в теле компонента я увеличиваю внешний счётчик, пишу в глобальный массив или шлю запрос, то при каждом лишнем вызове результат будет разным, а в конкурентном режиме побочный эффект может случиться для рендера, который так и не попал на экран. Поэтому StrictMode в разработке вызывает компоненты дважды: нарушение становится видимым. Локальную переменную, созданную в этом же рендере, мутировать можно, она никому не видна. Всё, что влияет на внешний мир, переносим в обработчики событий, а синхронизацию с внешними системами в эффекты. На чистоте держится и React Compiler: он автоматически мемоизирует только корректный код.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.