Context API - إدارة الحالة العامة — مقدمة React

Context API

Context يوفر طريقة لمشاركة البيانات بين المكونات دون تمريرها يدوياً عبر كل مستوى.

متى نستخدم Context؟

- بيانات يحتاجها عدة مكونات (مثل: المستخدم، الثيم، اللغة)

- تجنب "prop drilling" - تمرير props عبر مكونات لا تحتاجها

إنشاء Context

import { createContext, useContext, useState } from 'react';

// 1. إنشاء Context
const ThemeContext = createContext();

// 2. إنشاء Provider
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(t => t === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Hook مخصص للاستخدام
function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

export { ThemeProvider, useTheme };

الاستخدام

// App.jsx
function App() {
  return (
    <ThemeProvider>
      <Header />
      <Main />
      <Footer />
    </ThemeProvider>
  );
}

// Header.jsx
function Header() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <header className={`header ${theme}`}>
      <button onClick={toggleTheme}>
        تبديل الوضع
      </button>
    </header>
  );
}

import { createContext, useContext, useState } from 'react';

// Auth Context مثال
const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  
  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);
  
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  return useContext(AuthContext);
}

// الاستخدام في مكون
function Profile() {
  const { user, logout } = useAuth();
  
  if (!user) return <p>يرجى تسجيل الدخول</p>;
  
  return (
    <div>
      <p>مرحباً {user.name}</p>
      <button onClick={logout}>تسجيل خروج</button>
    </div>
  );
}