React Context API

Context API solves prop drilling - passing data through many components.

Creating Context

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

const ThemeContext = createContext();

function App() { const [theme, setTheme] = useState('light');

return ( <ThemeContext.Provider value={{ theme, setTheme }}> <Header /> <Content /> </ThemeContext.Provider> ); } ```

Using Context

```javascript function Header() { const { theme, setTheme } = useContext(ThemeContext);

return ( <header style={{ background: theme === 'dark' ? '#333' : '#fff' }}> <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}> Toggle Theme </button> </header> ); } ```

Auth Context Example

```javascript 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); } ```

Using it:

```javascript function Profile() { const { user, logout } = useAuth();

return ( <div> <h1>Welcome {user.name}</h1> <button onClick={logout}>Logout</button> </div> ); } ```

Remember

- Avoid prop drilling - Wrap app with Provider - useContext to access values - Good for theme, auth, language

> Congratulations on completing beginner React! Moving to intermediate topics!