Chapter 6 — State

Props — tashqi ma'lumot. State — komponentning o'z ichki, vaqt o'tishi bilan o'zgaradigan xotirasi. Bu — butun handbookdagi eng muhim boblardan biri.

---

6.1 useState Asoslari

Simple Explanation

State — React tomonidan kuzatiladigan, o'zgarganda komponentni qayta render qildiruvchi ma'lumot.

Example — Oddiy o'zgaruvchi ISHLAMAYDI

App.jsx
React JSXNusxalash
01function Counter() {
02  let count = 0;
03  function increment() {
04    count++; // qiymat o'zgaradi, lekin UI yangilanmaydi
05  }
06  return <button onClick={increment}>{count}</button>;
07}

Example — useState bilan TO'G'RI

App.jsx
React JSXNusxalash
01function Counter() {
02  const [count, setCount] = useState(0);
03  return (
04    <button onClick={() => setCount(count + 1)}>
05      {count}
06    </button>
07  );
08}

Why Does It Exist?

React count o'zgarganidan xabardor bo'lishi kerak, aks holda komponentni qayta chaqirmaydi (re-render qilmaydi). setCount — React'ga aynan shu signalni beradi.

6.2 Object va Array State

Example

App.jsx
React JSXNusxalash
01const [user, setUser] = useState({ name: "Abbos", age: 26 });
02function updateName(name) {
03  setUser({ ...user, name }); // eski qiymatlarni saqlab, faqat name'ni yangilaymiz
04}
05 
06const [cart, setCart] = useState([]);
07function addToCart(product) {
08  setCart((currentCart) => [...currentCart, product]);
09}

💡 Key Idea
setCart((currentCart) => ...) — functional update. Bu, ayniqsa bir nechta yangilanish ketma-ket bo'lganda, eng so'nggi state'ga asoslanishni kafolatlaydi.

6.3 Render va Snapshot Mental Modeli

Diagram

code.text
TEXTNusxalash
01User Action
02     ↓
03setState() chaqiriladi
04     ↓
05React yangi state'ni "rejalashtiradi" (schedules)
06     ↓
07Komponent funksiyasi qaytadan chaqiriladi (re-render)
08     ↓
09Yangi JSX (UI tasviri) hosil bo'ladi
10     ↓
11React uni eskisi bilan solishtiradi va DOM'ni yangilaydi

Simple Explanation

Har bir render — bu "snapshot": o'sha render ichidagi count qiymati o'zgarmas (const kabi qotib qoladi), keyingi render esa yangi count qiymati bilan yangi funksiya chaqiruvi bo'ladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Increment/decrement/reset tugmalari bo'lgan Counter komponent yarating.

🟡 Exercise 2 — Medium

Task: To'liq Todo List komponenti — qo'shish, o'chirish, bajarilgan deb belgilash.

🔴 Exercise 3 — Hard

Task: Shopping Cart — mahsulot qo'shish, o'chirish va umumiy narxni hisoblash (barchasi state orqali).

🔮 Predict the Output

App.jsx
React JSXNusxalash
01const [count, setCount] = useState(0);
02 
03function handleClick() {
04  setCount(count + 1);
05  setCount(count + 1);
06}

🧠 Think first! Button bir marta bosilganda count nechaga o'zgaradi — 1 ga yoki 2 ga?

<details> <summary>Answer</summary> Faqat 1 ga.

Why?
Ikkala chaqiruv ham o'sha renderdagi "qotib qolgan" count qiymatidan (masalan 0) foydalanadi, ya'ni ikkalasi ham setCount(1) chaqirgan bilan barobar. To'g'ri natija uchun functional update kerak: setCount(c => c + 1) ikki marta.

</details>

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01const [todos, setTodos] = useState([]);
02 
03function addTodo(text) {
04  todos.push({ id: Date.now(), text });
05  setTodos(todos);
06}

Your Task: Bu kod nega UI'ni yangilamaydi?

<details> <summary>Solution</summary> `push()` massivni mutate qiladi — reference o'zgarmagani uchun React "yangi state" deb tanimasligi mumkin.

Yechim:

App.jsx
React JSXNusxalash
01function addTodo(text) {
02  setTodos([...todos, { id: Date.now(), text }]);
03}

</details>

📌 Chapter Summary

State — komponentning React tomonidan kuzatiladigan xotirasi. U o'zgarganda, React komponentni qayta render qiladi va UI'ni yangilaydi. State har doim immutable tarzda yangilanadi.

🎯 Key Takeaways

• Oddiy o'zgaruvchi emas, useState — re-render'ni ishga tushiradi
• State har doim immutable tarzda, mutation'siz yangilanadi
• Ketma-ket yangilanishlar uchun functional update (setState(prev => ...)) ishlatiladi
• Har bir render — o'zining "qotib qolgan" state qiymatiga ega snapshot

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01const [value, setValue] = useState(initial);
02setValue(newValue);                          // oddiy update
03setValue(prev => prev + 1);                  // functional update
04setObj({ ...obj, key: newValue });           // object update
05setArr([...arr, newItem]);                   // array qo'shish
06setArr(arr.filter(x => x.id !== id));        // array o'chirish

---