Если ты когда-то писал на jQuery или Vue 2 — идея глобальной переменной не казалась чем-то плохим. Пихнул в window.AppConfig = {...} и радуешься жизни. Но в мире React такая история быстро становится историей боли.

React построен на одностороннем потоке данных. Родитель → дети. Всё, точка. Хочешь шарить данные между разными кусками интерфейса — используй props, context, Redux, Zustand, хоть Flux, если тебя ещё не вылечили. Но не глобальные переменные. Никогда.

Начинается всё просто. Есть какой-нибудь конфиг — список языков, ключ API, ID текущего пользователя. Его нужно заюзать в разных компонентах. Пихнуть в глобальную переменную — соблазн велик. Быстро, понятно, "всё работает". Особенно, если приходишь в React после PHP или Vue 2, где глобалками никого не удивишь.

window.config = {
  lang: 'en',
  userId: 42,
  apiKey: 'SECRET_KEY'
};

А потом тебе нужно поменять этот config на лету, или разлогинить юзера, или сменить язык. И ты внезапно ловишь баги, потому что разные части приложения уже давно читают устаревшие значения. И нет никакого контроля над этим бардаком.

Почему это боль, особенно в React

React — про односторонний поток данных. Родитель передаёт данные детям через props, а не наоборот. Если ты начинаешь шарить данные мимо этой схемы — ты ломаешь весь смысл фреймворка.

React не отслеживает изменения в глобальных объектах. Твой компонент не будет перерендерен, если ты вдруг меняешь window.config.userId = 99. И ты получаешь баг, который не ловится в консоли, не валится в ошибку, но делает поведение непредсказуемым.

Что делать нормально?

Вот нормальные способы шарить данные в React:

1. Props — если это не многоуровнево

Классика. Родитель знает, кто ты такой, и передаёт тебе всё, что нужно.

<UserProfile userId={user.id} />

2. Context API — когда надо шарить данные глубоко

Контекст — это способ прокинуть данные вниз по дереву компонентов без проброса через props.

const UserContext = createContext();

<UserContext.Provider value={user}>
  <YourApp />
</UserContext.Provider>

И потом в любом компоненте:

const user = useContext(UserContext);

3. Redux, MobX — если ты уже устал

Когда данных до хрена и всё это нужно читать и менять из разных мест — бери что-то посерьёзнее. Redux уже не такой страшный, как раньше.

А как же конфиги и ENV?

Если тебе нужно просто прокинуть условный API_URL или IS_PROD, используй .env и import.meta.env.VITE_API_URL или аналог для Create React App. Это нормально. Но не надо тащить это в window.

Заключение: глобалки — это гвозди в крышку дебаггинга

Глобальные переменные в React — это как пытаться построить модульное приложение на соплях. Оно может работать. До тех пор, пока не начнёт ломаться.