Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.
ВойтиСоздать аккаунт — бесплатноЗакончили урок?
Войдите, чтобы отмечать прогресс
В этом решении ThemeBadge читает контекст через хук useContext вместо Consumer: одна строка, значение сразу в переменной, разметка без вложенности.
Вместо ThemeContext.Consumer и render-prop вызывается React.useContext(ThemeContext) — возвращается текущее значение контекста (то же, что передано в провайдер). Дальше theme используется в разметке как обычная переменная. Провайдер и дерево не меняются, меняется только способ чтения контекста внутри компонента.
Провайдер по-прежнему передаёт value="dark", ThemeBadge рендерится внутри него. Разница только в том, как ThemeBadge получает значение: не через Consumer, а через хук — результат на экране тот же.