Потребитель вне провайдера

В этом решении показаны два случая: бейдж внутри провайдера (получает value и показывает имя) и бейдж вне провайдера (получает defaultValue из createContext и показывает «Гость»).

Контекст с defaultValue

const UserContext = React.createContext({ user: null });

Контекст создаётся с аргументом { user: null } — это значение получат все потребители, которые окажутся вне соответствующего провайдера. Так мы задаём осмысленное поведение по умолчанию: «пользователя нет» → показываем «Гость».

UserBadge: внутри и снаружи провайдера

function UserBadge() {
    const { user } = React.useContext(UserContext);

    return 

Один и тот же компонент: если он внутри провайдера, в контекст приходит value с объектом user — показываем имя и зелёную точку. Если снаружи — приходит defaultValue { user: null } — показываем «Гость» и amber-точку. Логика отображения не меняется, меняется только источник данных.

App: два блока — внутри провайдера и снаружи

function App() {
    const user = { name: 'Макс' };

    

Провайдер оборачивает только первый блок (шапка и подзаголовок). Второй div с UserBadge — вне провайдера, на одном уровне с закрывающим тегом провайдера. Там тот же UserBadge, но он подписан на контекст без провайдера выше по дереву и получает defaultValue — поэтому во втором блоке отображается «Гость».