Контекст и перерисовки
Вопрос
Как работает контекст и почему из-за него всё перерисовывается?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
все потребители перерисовываются при смене значения провайдера
сравнение идёт по ссылке на value
объект-литерал в value меняет ссылку каждый рендер
лечение: useMemo на value и разделение контекстов
контекст - про передачу, а не про управление состоянием
memo не спасает потребителя контекста
Что могут спросить следом
- Как разделить контекст на данные и действия
- Почему memo не спасает потребителя
- Когда стоит уйти с контекста на Zustand или Redux
Разбор
Когда значение провайдера меняется, React перерисовывает все компоненты,
которые читают этот контекст, независимо от memo. Сравнение - по ссылке.
Отсюда классическая ошибка: <Ctx.Provider value={{ user, setUser }}> создаёт новый объект
на каждом рендере провайдера, и обновляется вообще всё дерево. Лечение: useMemo на
значение и разделение на два контекста - редко меняющиеся данные отдельно от часто
меняющихся, состояние отдельно от функций-действий.
Контекст - механизм доставки, а не менеджер состояния. Когда обновлений много и они точечные, нужен внешний стор с подпиской на срез.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.