Контекст в функциях (useContext)

В этом решении ThemeBadge читает контекст через хук useContext вместо Consumer: одна строка, значение сразу в переменной, разметка без вложенности.

ThemeBadge с useContext

function ThemeBadge() {
    const theme = React.useContext(ThemeContext);

    return <span className="badge">Тема: {theme}</span>;
}

Вместо ThemeContext.Consumer и render-prop вызывается React.useContext(ThemeContext) — возвращается текущее значение контекста (то же, что передано в провайдер). Дальше theme используется в разметке как обычная переменная. Провайдер и дерево не меняются, меняется только способ чтения контекста внутри компонента.

App без изменений

Провайдер по-прежнему передаёт value="dark", ThemeBadge рендерится внутри него. Разница только в том, как ThemeBadge получает значение: не через Consumer, а через хук — результат на экране тот же.