Введение в контекст

В этом решении мы вводим React Context: создаём контекст пользователя, оборачиваем дерево в провайдер и читаем данные в UserMenu через useContext, чтобы убрать проброс пропсов через Header.

Создание контекста

const UserContext = React.createContext(null);

Контекст создаётся один раз с помощью React.createContext. Аргумент null — значение по умолчанию: его получат компоненты, которые окажутся вне соответствующего провайдера. Имя контекста обычно выбирают по смыслу данных — здесь это данные пользователя.

Чтение контекста в UserMenu

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

    return (
        <div

Вместо пропа user компонент получает данные из контекста через хук React.useContext(UserContext). Результат — тот же объект, который был передан в провайдер. Пропы у UserMenu больше не нужны.

Header без пропсов

function Header() {
    return (
        <div className="topBar">
            <h1 className

Header больше не принимает user и не передаёт его в UserMenu. Он только рендерит разметку шапки и UserMenu — данные пользователя приходят из контекста внутри UserMenu.

Провайдер в App

function App() {
    const user = { name: 'Maxim', plan: 'Pro' };

В App создаётся объект user и передаётся в дерево через UserContext.Provider. Все компоненты внутри провайдера — в том числе вложенные Header и UserMenu — могут прочитать это значение через useContext(UserContext). Проброс пропсов не нужен.