React js da Hooks

Hooks (hook lar) React v16.8 da e'lon qilingan bo'lib, sizga state bilan ishlash va shunga o'xshash holatlarda Classlarda yozmastan React dagi feature larni ishlatishda qo'l keladi, va albatta siz o'zingizni Hook laringizni ham yaratsangiz bo'ladi (OOP dan zerikib ketganlar, FP da yozishsa bo'ladi).

useState

import React, { useState } from 'react';

function Hisoblagich() {
  // Yangi state o'zgaruvchini yaratib, shu tarzda 
  const [son, setSon] = useState(0);

  return (
    <div>
      <p>Hozirgi son: {son}</p>
      <button onClick={() => setSon(son + 1)}>
        Sonni oshirish
      </button>
    </div>
  );
}

useState - bu komponentda holatni boshqarish uchun ishlatiladi. Bu misolda, useState(0) boshlang'ich qiymat sifatida 0 ni oladi. U son (joriy holat) va setSon (holatni yangilash funksiyasi) ni qaytaradi.

useEffect

import React, { useState, useEffect } from 'react';

function Soat() {
  const [vaqt, setVaqt] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setVaqt(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Hozirgi vaqt: {vaqt.toLocaleTimeString()}</p>;
}

useEffect - Hayot sikli metodlarini almashtiradi va side effect'larni bajarish uchun ishlatiladi. Bu misolda, useEffect har sekundda vaqtni yangilaydi. Bo'sh massiv [] ikkinchi argument sifatida berilgan, bu degani effekt faqat komponent birinchi marta render qilinganda ishlaydi.

useContext

import React, { useContext } from 'react';

const TilKonteksti = React.createContext('uz');

function TilniKorsatuvchi() {
  const til = useContext(TilKonteksti);
  return <p>Hozirgi til: {til}</p>;
}

function App() {
  return (
    <TilKonteksti.Provider value="o'zbek">
      <TilniKorsatuvchi />
    </TilKonteksti.Provider>
  );
}

useContext - bu React kontekstidan qiymatlarni olish uchun ishlatiladi. Bu misolda, useContext TilKonteksti'dan joriy tilni oladi.

Bu React'ning asosiy hook lari. Ular funksional komponentlarda holatni boshqarish, hayot sikli metodlarini ishlatish va kontekstga kirish imkonini beradi.

Asosiylardan tashqari yana built-in hook lar:

useReducer: Murakkab holatlarni boshqarish uchun ishlatiladi.
useCallback: Funksiyalarni keshlash uchun ishlatiladi.
useMemo: Qiymatlarni keshlash uchun ishlatiladi.
useRef: DOM elementlariga yoki boshqa qiymatlarga havola saqlash uchun ishlatiladi.
useLayoutEffect: useEffect'ga o'xshaydi, lekin DOM o'zgarishlaridan oldin sinxron ravishda ishlaydi.
useImperativeHandle: Ota-komponentlarga farzand-komponentning ba'zi funksiyalarini ochib berish uchun ishlatiladi.
useDebugValue: React DevTools'da custom hook'lar uchun ma'lumotlarni ko'rsatish uchun ishlatiladi.
useId: noyob id larni yaratishda qo'l keladi
useTransition: bu foydalanuvchi interfeysini bloklamasdan holatini yangilash imkonini beradi

https://react.dev/reference/react/hooks

https://t.me/shahzodcodes

Donat uchun: https://tirikchilik.uz/@sheyxuz