Что вызывает перерисовку
Вопрос
Когда React перерисовывает компонент?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
изменилось собственное состояние
перерисовался родитель
изменился контекст, на который подписан компонент
новые пропсы сами по себе не причина - причина рендер родителя
setState с тем же значением может пропустить рендер (Object.is)
перерисовка - это вызов функции компонента, не обязательно правка DOM
Что могут спросить следом
- Чем рендер отличается от коммита
- Когда setState не вызовет рендер
- Как понять, что рендеров действительно слишком много
Разбор
Компонент рендерится, когда: изменилось его состояние, перерисовался родитель, или изменилось значение контекста, на который он подписан.
Частое заблуждение - «компонент рендерится, когда меняются пропсы». На самом деле новые
пропсы приходят потому, что отрендерился родитель; если пропсы те же, но родитель
отрендерился, ребёнок тоже отрендерится - пока его не обернут в memo.
И главное: рендер - это вызов функции компонента и сравнение результата. Правка настоящего DOM происходит только там, где разметка действительно изменилась. Поэтому «лишний рендер» обычно дёшев, и оптимизировать его стоит по замерам, а не по ощущению.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.