useState

Holat (state) nima?

Komponent — oddiy funksiya. Har safar chaqirilganda ichidagi oʻzgaruvchilar noldan yaratiladi, shuning uchun oddiy let bilan sahifadagi qiymatni "eslab qolish" mumkin emas. Holat — React komponent uchun renderlar orasida saqlab turadigan qiymat.

useState qanday ishlaydi

useState ga boshlangʻich qiymat beriladi, u esa ikki elementli massiv qaytaradi: joriy qiymat va uni oʻzgartiruvchi funksiya (setter).

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

• count — hozirgi qiymat. Birinchi renderda u 0.
• setCount — yangi qiymatni beradi va komponentni qayta render qildiradi.

Holatni toʻgʻridan-toʻgʻri oʻzgartirmang: count = count + 1 yozsangiz, React buni sezmaydi va ekran yangilanmaydi. Faqat setter orqali.

Setter darhol oʻzgartirmaydi

Setter chaqirilgandan keyin ham shu render ichida count eski qiymatida qoladi. Yangi qiymat keyingi renderda keladi.

function handleClick() {
  setCount(count + 1);
  console.log(count); // hali eski qiymat
}

Yangi qiymat eskisiga bogʻliq boʻlsa, setterga funksiya bering — u doim eng soʻnggi qiymatni oladi:

setCount((c) => c + 1);
setCount((c) => c + 1); // ikki marta oshadi

Obyekt va massivlar

Obyekt yoki massivni oʻzgartirish oʻrniga yangisini yarating — React oʻzgarishni havola (reference) boʻyicha aniqlaydi.

setUser({ ...user, name: "Ali" });
setItems([...items, newItem]);

Qoidalar

1. useState faqat komponent (yoki custom hook) ning yuqori darajasida chaqiriladi — if, sikl yoki ichki funksiya ichida emas.
2. Har bir komponent nusxasining holati alohida: ikkita Counter bir-biriga taʼsir qilmaydi.
3. Renderdan hisoblab chiqarish mumkin boʻlgan narsani holatga solmang.