Chapter 16 — Context API

Props drilling — ma'lumotni ko'p qavat orqali uzatish muammosi. Context — shu muammoni yechadi.

---

16.1 createContext, Provider va useContext

Example

App.jsx
React JSXNusxalash
01const ThemeContext = createContext("light");
02 
03function App() {
04  return (
05    <ThemeContext.Provider value="dark">
06      <Toolbar />
07    </ThemeContext.Provider>
08  );
09}
10 
11function ThemedButton() {
12  const theme = useContext(ThemeContext);
13  return <button className={theme}>Tugma</button>;
14}

Why Does It Exist?

Agar theme yoki currentUser kabi ma'lumot komponent daraxtining ko'p joyida kerak bo'lsa, uni har bir oraliq komponent orqali prop sifatida uzatish (props drilling) — kodni chalkashtiradi. Context ma'lumotni to'g'ridan-to'g'ri kerakli komponentga "efirga uzatadi".

16.2 Real-world: Authentication Context

Example

App.jsx
React JSXNusxalash
01const AuthContext = createContext(null);
02 
03function AuthProvider({ children }) {
04  const [user, setUser] = useState(null);
05  function login(userData) { setUser(userData); }
06  function logout() { setUser(null); }
07 
08  return (
09    <AuthContext.Provider value={{ user, login, logout }}>
10      {children}
11    </AuthContext.Provider>
12  );
13}
14 
15function Profile() {
16  const { user, logout } = useContext(AuthContext);
17  return <button onClick={logout}>{user.name} — Chiqish</button>;
18}

16.3 Performance va Qachon Ishlatmaslik Kerak

Example

code.text
TEXTNusxalash
01Provider value o'zgarsa
02        ↓
03BARCHA useContext ishlatuvchi komponentlar re-render bo'ladi

⚠️ Common Mistake
Providerning value propini har render'da yangi obyekt sifatida berish (value={{ user }}) — bu barcha consumer'larni keraksiz qayta render qiladi.

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Light/Dark theme'ni butun ilova bo'ylab almashtiradigan ThemeContext yarating.

🔴 Exercise 2 — Hard

Task: AuthContext orqali login/logout funksionalligini amalga oshiring va foydalanuvchi ma'lumotini istalgan komponentda ko'rsating.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function App() {
02  const [user, setUser] = useState(null);
03  return (
04    <AuthContext.Provider value={{ user, setUser }}>
05      <Dashboard />
06    </AuthContext.Provider>
07  );
08}

Your Task: Har render'da value={{ user, setUser }} yangi obyekt yaratiladi. Bu qanday muammoga olib kelishi mumkin?

<details> <summary>Solution</summary> `App` boshqa sabab bilan re-render bo'lganda ham, yangi `{ user, setUser }` obyekti yaratiladi — bu barcha `useContext(AuthContext)` ishlatuvchi komponentlarni keraksiz qayta render qilishi mumkin, hatto `user` o'zi o'zgarmagan bo'lsa ham. Yechim — `useMemo` bilan value'ni memoize qilish (PART 25'da chuqur o'rganiladi): ```jsx const value = useMemo(() => ({ user, setUser }), [user]); ``` </details>

📌 Chapter Summary

Context — props drilling muammosini yechadi. Har qanday global state uchun emas — kam o'zgaradigan, keng tarqalgan ma'lumot uchun mos.

🎯 Key Takeaways

• Context — "efir uzatish" mexanizmi
• Provider value o'zgarsa, barcha consumer komponentlar qayta render bo'ladi
• Tez-tez o'zgaradigan ma'lumot uchun Context mos emas

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01const MyContext = createContext(defaultValue);
02<MyContext.Provider value={data}>{children}</MyContext.Provider>
03const data = useContext(MyContext);

---