Kursning markaziy moduli: serverdan ma’lumot olish va uni boshqaradigan hook’lar.

JSON Server — mashq uchun API

Haqiqiy backend’siz mashq qilish uchun json-server ishlatiladi: oddiy db.json fayl to’laqonli REST API’ga aylanadi:

npx json-server --watch db.json --port 8000

Natija: http://localhost:8000/events manzili JSON qaytaradi; POST/DELETE ham ishlaydi.

useEffect — nega va qanday

Komponent funksiyasi "toza" bo’lishi kerak: JSX qaytaradi, boshqa ish qilmaydi. Tashqi dunyo bilan ishlash (fetch, taymer, sarlavha o’zgartirish) — side effect, va uning joyi useEffect:

useEffect(() => {
  fetch("http://localhost:8000/events")
    .then((res) => res.json())
    .then((data) => setEvents(data));
}, []);

useEffect render’dan keyin ishlaydi. Ikkinchi argument — dependency array — qachon qayta ishlashini belgilaydi:

Tipik xato. Fetch’li effect’ga array bermaslik: fetch → setState → qayta render → yana fetch → ... cheksiz aylanish. Serverdan bir marta olish uchun [] shart.

useCallback

Funksiya har render’da qaytadan yaratiladi — dependency’da funksiya turgan bo’lsa, effect har safar qayta ishlayveradi. useCallback(fn, [deps]) funksiyani "eslab qoladi" va faqat deps o’zgarsa yangilaydi — shu zanjirni uzadi.

Custom hook — useFetch

Fetch + loading + error mantig’i har sahifada takrorlanadi; uni bir marta o’z hook’ingizga yig’asiz:

function useFetch(url) {
  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState(null);
  // useEffect ichida fetch, holatlarni yangilash...
  return { data, isPending, error };
}

const { data: events, isPending, error } = useFetch("http://localhost:8000/events");

Qoidalar: nomi use bilan boshlanadi; ichida boshqa hook’larni ishlatishi mumkin; qaytargani — oddiy object.

Loader va error

Uch holat — uch ko’rinish; JSX’da shartli render bilan:

{isPending && <p>Yuklanmoqda...</p>}
{error && <p>Xatolik: {error}</p>}
{events && <EventList events={events} />}

Natija: avval "Yuklanmoqda...", ma’lumot kelgach ro’yxat; server o’chiq bo’lsa — xato xabari. Foydalanuvchi hech qachon "bo’sh oq ekran"da qolmaydi.

useReducer

State murakkablashib, bir nechta bog’liq qiymat bo’lsa, useReducer tartib beradi: barcha o’zgarishlar bitta reducer funksiyada, har o’zgarish nomli action bilan:

const [state, dispatch] = useReducer(reducer, { count: 0 });

dispatch({ type: "increment" });

Bu naqsh keyingi kursning poydevori: Redux aynan shu g’oyani butun ilova darajasiga olib chiqadi.

Amaliyot

1. json-server bilan db.json yarating (5 ta tadbir) va uni useEffect’da fetch qiling.
2. Dependency array’ni ataylab olib tashlab, Network bo’limida cheksiz so’rovlarni ko’ring — keyin [] qaytaring.
3. Mantiqni useFetch hook’iga ko’chiring va ikki sahifada ishlating.
4. Loader va error holatlarini qo’shing; serverni o’chirib error’ni sinang.
5. Hisoblagichni useState’dan useReducer’ga o’tkazing (increment/decrement/reset action’lari).

Modul testini ishlang — keyingi modul sahifalararo navigatsiya: React Router.