useState direktivasi nima uchun ishlatiladi?

useState — bu React-ning hook bo‘lib, u funksional komponentlarga holat qo‘shishga imkon beradi. U ikki elementdan iborat massivni qaytaradi: hozirgi holat qiymati va uni yangilash uchun funksiya. Yangilash funksiyasi chaqirilganda, komponent yangi qiymat bilan qayta render qilinadi.

Foydalanish misoli:

import { useState } from 'react';

function Counter() {
  // 'count' — hozirgi holat, 'setCount' — uni yangilash funksiyasi
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Hisoblagich: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Oshirish
      </button>
    </div>
  );
}

Asosiy xususiyatlar:

• Holat qo‘shadi: Bu holatni funksional komponentlarda ishlatishga imkon beradi, ilgari faqat sinf komponentlarda mavjud edi.
• Yangilash funksiyasi: Maxsus funksiyani qaytaradi, holatni o‘zgartirish uchun.
• Qayta render qilish: Holatni yangilash funksiyasi orqali o‘zgartirish, komponentning qayta render qilinishiga olib keladi.
• Primitivlar va obyektlar: Har qanday ma'lumot turini saqlay oladi: raqamlar, satrlar, booleanlar, obyektlar, massivlar.
• Lazily initialization: Boshlang‘ich qiymat faqat birinchi renderda ishlaydigan funksiya bo‘lishi mumkin, bu qimmatli hisoblashlar uchun foydalidir.

const [data, setData] = useState(() => {
  // Qimmatli hisoblashlar faqat bir marta bajariladi
  const initialData = someExpensiveCalculation();
  return initialData;
});