React позволяет хранить состояние в компоненте и передавать его пропсами вниз по дереву. Но когда данные нужны на нескольких уровнях, пропсы приходится пробрасывать через компоненты, которым они не нужны — это и есть «проброс пропсов» (prop drilling).
То же самое с колбэками: чтобы дочерний компонент мог обновить состояние, функцию приходится передавать через промежуточные слои. И когда в приложении несколько независимых «источников» данных (тема, пользователь, локаль), структура пропсов быстро усложняется.
React Context даёт возможность «предоставить» значение выше в дереве и «подписаться» на него в любом дочернем компоненте — без передачи через каждый уровень. При этом важно понимать: когда потребитель оказывается вне провайдера, как разделять контексты и как не вызывать лишние перерисовки в больших списках.
В этом курсе вы по шагам разберёте Context на 10 заданиях: от первого провайдера и потребителя до сценариев с несколькими контекстами и оптимизацией списков.
Что такое React Context?
Context — это механизм React для передачи данных через дерево компонентов без явной передачи пропсов на каждом уровне. Вы создаёте контекст (), «предоставляете» значение через и «читаете» его в дочерних компонентах через или хук . Контекст удобен для темы, текущего пользователя, локали и другого «глобального» для части дерева состояния. Важно: значение провайдера сравнивается по ссылке, поэтому нестабильный объект в приводит к перерисовкам всех потребителей — в курсе разбираем, как этого избежать.