intermediate
Avoiding unnecessary renders
Находите причины render, стабилизируйте границы владения и избегайте широкого context или частой смены props.
Render родителя по умолчанию вызывает render всех потомков, пока они не memoized со стабильными props. Обновление context перерисовывает каждого потребителя. Новые объектные или функциональные литералы в JSX дают свежие ссылки каждый render и ломают `React.memo`.
Ищите причину в React DevTools Profiler или why-did-you-render до посыпания memo. Делите context, опускайте state ниже или колокируйте state с поддеревом, которому он нужен. Не каждый render дорог — сначала измерьте.
На интервью объясняйте концепцию на конкретном примере и называйте поведение, которое проверяют.
Типовые ошибки: скрывать поток данных, дробить компоненты чрезмерно и выполнять побочные эффекты в render.
Компромисс часто между ясностью и переиспользованием или между явными props и удобством.
Чеклист:
- Профилируйте до оптимизации.
- Стабилизируйте props только там, где профиль показал стоимость.
- Сужайте область context и state.