🧠 Context API nima?

Context API — bu butun ilova bo‘yicha ma'lumotlarni ulashish imkonini beruvchi vosita. U yordamida prop drillingdan (ya’ni ma’lumotlarni har bir komponent orqali pastga o‘tkazish) qutulish mumkin.

🔁 Context’siz holat:

Context’dan foydalanmasangiz, props’larni har darajaga o‘zingiz o‘tkazishingiz kerak bo‘ladi:

<App> <Parent> <Child> <Grandchild userName="Davron" /> </Child> </Parent> </App>

Bu holatda userName har bir komponent orqali uzatilmoqda — bu prop drilling deyiladi.

🌐 Context bilan:

Siz Context yaratib, uni quyidagicha ishlatishingiz mumkin:

<UserContext.Provider value="Davron"> <App /> </UserContext.Provider>

Endi <App /> ichidagi istalgan komponent useContext() yordamida bu qiymatni to‘g‘ridan-to‘g‘ri oladi. Endi props uzatish shart emas.

Yana bir misol:

import { useState } from "react";

import "./App.css"; import Component1 from "./components/Component1";

function App() { const [count, setCount] = useState(0);

return ( <div className="App"> <h2>App</h2> <Component1 count={count} setCount={setCount} /> </div> ); }

export default App;

Component1.jsx

import Component2 from "./Component2";

function Component1({ count, setCount }) { return ( <div className="component1"> <h2>Component1</h2> <Component2 count={count} setCount={setCount} /> </div> ); }

export default Component1;

Component2.jsx

import Component3 from "./Component3";

function Component2({ count, setCount }) { return ( <div className="component2"> <h2>Component2</h2> <Component3 count={count} setCount={setCount} /> </div> ); }

export default Component2;

Component3.jsx

function Component3({ count, setCount }) { return ( <div className="component3"> <h2>Component3</h2>

<h2>Counter: {count}</h2>

<button onClick={count>0 && (() => {setCount(count - 1)})}>-</button> <button onClick={()=> {setCount(count+1)}}>+</button> </div> ); }

export default Component3;

Bu yerda ko'rganimizdek, count va setCount() Component3.jsx ga yetib kelguncha har bir komponentdan o'tib kelmoqda.

Ya'ni App komponentidan to Component3 gacha har bir komponent o'zidan shu obyektlarni o'tkazishga majbur bo'lmoqda.

Endi esa shularni Context API yordamida bajarishga harakat qilamiz.

import { useState, createContext } from "react";

import "./App.css"; import Component1 from "./components/Component1";

export const Context = createContext();

function App() { const [count, setCount] = useState(0);

return ( <div className="App"> <h2>App</h2> <Context.Provider value={{count, setCount}}> <Component1 /> </Context.Provider> </div> ); }

export default App;

import { Context } from "../App"; import { useContext } from "react";

function Component3() { const {count, setCount} = useContext(Context); return ( <div className="component3"> <h2>Component3</h2>

<h2>Counter: {count}</h2>

<button onClick={count>0 && (() => {setCount(count - 1)})}>-</button> <button onClick={()=> {setCount(count+1)}}>+</button> </div> ); }

export default Component3;

Keling barcha qadamlarni bir takrorlab olamiz:

1. Biz barcha komponentlarni ichida ma'lumotlarni ishlata olishimiz uchun dastlab createContext'ni React kutubxonasidan import qilib oldik.

2. Shundan so'ng Context degan o'zgaruvchi ochdik va unga createContext() degan funksiyani tengladik

3. Shundan so'ng asosiy komponentimizni shu Context o'zgaruchisiga o'radik va Provider berdik hamda value orqali qiymatlarni berib yubordik. Shundan so'ng o'ralgan komponent ichidagi barcha komponentlar berilgan qiymatlarni ishlata oladi.

4. Shundan so'ng Component3 ga o'tamiz va App komponentidan e'lon qilgan o'zgaruvchimizni import qilib olamiz. Shuningdek, import qilingan Context o'zgaruvchisini ishlatish uchun React kutubxonasidan useContext hookini ham import qilib olamiz.

Shundan so'ng komponent ichida useContextdan foydalanamiz va destructurizatsiya orqali kerakli ma'lumotlarni olamiz. Bizning misolda count va setcount.