Зачем нужен State Manager и Контекст? Почему просто не создавать переменные?

1. Проблема глобальных переменных

let user = null;  

// Компонент A  
user = { name: 'Alice' };  

// Компонент B  
console.log(user); // Иногда актуально, иногда нет  

Проблемы:

• React не узнает об изменении переменной → нет перерендера.

• Сложный контроль зависимостей.

2. Решение: React Context

Передает данные через дерево компонентов без явной передачи пропсов.

Пример:

const UserContext = createContext();  

function App() {  
  	const [user, setUser] = useState(null);  
  	return (  
    		<UserContext.Provider value={{ user, setUser }}>  
      			<Header />  
    		</UserContext.Provider>  
  	);  
}  

function Header() {  
  	const { user } = useContext(UserContext);  
  	return <div>{user?.name}</div>;  
}  

Плюсы:

• Избегаем пропс-дриллинг (A → B → C → D).

• Локальный стейт на уровне приложения.

Минусы:

• Перерендер всех потребителей при изменении.

3. State Manager (Redux, MobX, Zustand)

Пример Redux:

// Store  
const store = configureStore({ reducer: userReducer });  

// Компонент  
const user = useSelector(state => state.user);  

Зачем?

• Централизованное состояние – один источник правды.

• Инструменты разработчика – логирование, откат действий.

• Оптимизации – точечные подписки на изменения.

Вывод:

• Для малых проектов хватит Context.

• Для сложных – Redux/Zustand.

• Глобальные переменные – только для статичных данных.