🔥 useState() — bu nima?
useState() — bu React’da funksional komponentga xotira (state) qo‘shish uchun ishlatiladigan Hook.
State degani — bu komponent ichida saqlanadigan o‘zgaruvchi, u o‘zgarishi mumkin, va har safar o‘zgarsa, React avtomatik UI’ni yangilaydi.
🧪 Oddiy misol: Counter (Sanagich)
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 1-qadam: state e’lon qilinadi
const increase = () => {
setCount(count + 1); // 2-qadam: state yangilanadi
};
return (
<div>
<h2>🔢 Sanash: {count}</h2>
<button onClick={increase}>➕ Ko‘paytirish</button>
</div>
);
}
🔄 Bu qanday ishlaydi?
useState(0)yordamidacountnomli state 0 ga teng qilib yaratiladi.- Foydalanuvchi tugmani bossa,
increase()funksiyasi chaqiriladi. setCount(count + 1)yordamida state yangilanadi.- React komponentni qayta chizadi va yangi qiymatni ekranga chiqaradi.
❓ increase funksiyasi qayerda e’lon qilingan?
increase funksiyasi komponent ichida e’lon qilingan. Nega?
✅ Sababi:
countvasetCountfaqat komponent ichida mavjud.increase()funksiyasi ham shu state'ni ko'ra olishi uchun komponent ichida bo‘lishi shart.
Agar siz increase funksiyasini tashqarida yozsangiz, u count yoki setCount qiymatini ko'ra olmaydi.
✅ useState(0) bu massivmi?
➡️ Ha, useState() chaqirilganda u massiv (array) qaytaradi, ichida ikkita element bo‘ladi.
Bu yerda siz massivdan destrukturizatsiya (array destructuring) orqali ikkita qiymatni ajratib olyapmiz:
🧠 Boshqacha aytganda:
Agar biz buni kengaytirib yozadigan bo‘lsak:
const result = useState(0); // [0, funksiya]
const count = result[0]; // 0
const setCount = result[1]; // funksiya
Ammo shunday yozish noqulay va chalkash bo‘ladi. Shuning uchun biz buni qulay usulda yozamiz:
💡 Bonus Tip (eng ko'p ishlatiladigan useState lar):
const [text, setText] = useState('');
const [visible, setVisible] = useState(true);