Несколько провайдеров контекста

В этом решении тема и пользователь вынесены в два контекста: создаются ThemeContext и UserContext, в App дерево оборачивается в два вложенных провайдера, а ThemeBadge и UserBadge читают данные только из своих контекстов.

Два контекста

const ThemeContext = React.createContext(null);
const UserContext = React.createContext(null);

Один контекст отвечает за тему (значение и функцию переключения), второй — за объект пользователя. Компоненты подписываются только на то, что им нужно: бейдж темы не знает про пользователя, бейдж пользователя — про тему.

ThemeBadge читает тему из контекста

function ThemeBadge() {
    const { theme, setTheme } = React.useContext(ThemeContext)

Компонент получает theme и setTheme из ThemeContext, отображает текущую тему и кнопку переключения. Пропсы не нужны.

UserBadge читает пользователя из контекста

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

    return (
        <span

Достаёт объект user из UserContext и выводит имя. Ни тема, ни другие данные сюда не передаются.

App: два провайдера и useMemo для темы

function App() {
    const [theme, setTheme] = React.

Состояние темы и объект пользователя по-прежнему в App. Значение для темы обёрнуто в useMemo с зависимостью [theme], чтобы ссылка на объект не менялась без смены темы. Снаружи — провайдер темы, внутри — провайдер пользователя; в шапке рендерятся ThemeBadge и UserBadge. Каждый бейдж подписан только на свой контекст.