Context API haqida qo'shimcha

🧠 Context API bu nima?

React’ning Context API — bu komponentlar daraxti bo‘ylab ma’lumotlarni barcha bosqichlarga props uzatmasdan ulashish usulidir.

🔥 Nega Context kerak?

Faraz qilaylik sizda quyidagi tuzilma bor:

App ➝ Parent ➝ Child ➝ Grandchild

Agar siz Child va Grandchild komponentlariga bir xil ma’lumotni (masalan, foydalanuvchi ma’lumoti, mavzu, til) uzatmoqchi bo‘lsangiz, har bosqichda props orqali uzatish noqulay.

Context API yordamida siz bu ma’lumotni "uzatasiz" va har qanday ichki komponent undan foydalanishi mumkin bo‘ladi.

⚙️ Qanday ishlaydi? — 3 bosqichda

1. Context yaratish

import { createContext } from 'react';

const UserContext = createContext();

2. Provider orqali ma’lumot uzatish

Ma’lumotni ulashmoqchi bo‘lgan komponentlarni Provider bilan o‘rab oling:

<UserContext.Provider value={{ name: "Davron", age: 25 }}> <App /> </UserContext.Provider>

3. Context’ni ichki komponentda ishlatish

useContext yordamida ma’lumotni oling:

import { useContext } from 'react'; import { UserContext } from './UserContext';

function Profile() { const user = useContext(UserContext);

return <h2>Salom, {user.name}! Sizning yoshingiz {user.age}.</h2>;
}

✅ Context API qachon kerak bo‘ladi?

Light/Dark mavzularni almashtirish
Foydalanuvchi login ma’lumotlari
Tilni tanlash
Umumiy sozlamalar (preferences) uzatish