useState Hook — React state-ի հիմունքները

React-ում state-ը ներկայացնում է տվյալները, որոնք փոխվելիս ստիպում են React-ին վերարտադրել (re-render) կոմպոնենտը՝ նոր արժեքներով։
Եթե օգտագործես սովորական փոփոխական՝ React-ը չի իմանա, որ արժեքը փոխվել է, և UI-ն չի թարմացնի DOM-ը։

---

🔹 Ինչ է useState-ը

React-ը տրամադրում է հատուկ Hook՝ useState, որը թույլ է տալիս կոմպոնենտի ներսում ստեղծել և կառավարել state։ Սինտաքսը հետևյալն է․

const [state, setState] = useState(initialValue);

• state — պահում է ընթացիկ արժեքը։
• setState — ֆունկցիա, որը փոփոխում է state-ի արժեքը։
• initialValue — սկզբնական արժեքը։ Կարող է լինել թիվ, տեքստ, օբյեկտ կամ զանգված։

---

📍 Պարզ օրինակ — Counter հավելված

Ստեղծենք ամենահիմնական օրինակ՝ հաշվիչ (counter), որը ավելանում է յուրաքանչյուր սեղմումով։

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>Ավելացնել</button>
    </div>
  );
}

Այս օրինակում՝

• Սկզբնական արժեքը՝ 0
• setCount ֆունկցիան փոխում է count-ի արժեքը։
• UI-ն ավտոմատ թարմացվում է ամեն անգամ, երբ count-ը փոխվում է։

---

⚙️ Ինչու պետք է օգտագործել callback տարբերակը

Եթե state-ը փոխում ես մի քանի անգամ անընդմեջ, React-ը կարող է դրանք խմբավորել (batching) և օգտագործել հին արժեքը։ Այդ պատճառով ճիշտ է օգտագործել callback տարբերակը՝ setCount(prev => prev + 1)։

function increaseTwice() {
  // ❌ Սխալ տարբերակ
  setCount(count + 1);
  setCount(count + 1);

  // ✅ Ճիշտ տարբերակ
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
}

---

💡 Օրինակ 2 — օբյեկտային state

Եթե state-ը օբյեկտ է, պետք է այն փոփոխել immutable եղանակով՝ չփոխելով սկզբնական օբյեկտը։ Օգտագործիր spread (...) օպերատորը։

import React, { useState } from 'react';

export default function Profile() {
  const [profile, setProfile] = useState({
    name: 'Արամ',
    age: 30,
    location: 'Երևան'
  });

  function updateName() {
    setProfile(prev => ({ ...prev, name: 'Միխայել' }));
  }

  return (
    <div>
      <p>Անուն՝ {profile.name}</p>
      <p>Տարիք՝ {profile.age}</p>
      <p>Քաղաք՝ {profile.location}</p>
      <button onClick={updateName}>Փոխել անունը</button>
    </div>
  );
}

Տիպիկ սխալ՝ ուղղակիորեն փոփոխել state-ը՝ profile.name = '...' — դա չի առաջացնի rerender։

---

🧠 Օրինակ 3 — զանգվածային state

React-ում array state-ը նույնպես պետք է թարմացվի immutable ձևով։ Մի օգտագործիր push(), փոխարենը ստեղծիր նոր զանգված։

const [tasks, setTasks] = useState(['Գրել հոդված', 'Կարդալ React docs']);

function addTask() {
  // ❌ Սխալ տարբերակ — փոխում է նույն array-ը
  // tasks.push('Նոր առաջադրանք');
  // setTasks(tasks);

  // ✅ Ճիշտ տարբերակ
  setTasks(prev => [...prev, 'Նոր առաջադրանք']);
}

Արդյունքում React-ը կհասկանա, որ state-ը փոխվել է և կթարմացնի UI-ը։

---

⚡ Օրինակ 4 — lazy initialization

Եթե սկզբնական արժեքը պետք է հաշվարկվի թանկարժեք (expensive) գործողությամբ՝ օգտագործիր ֆունկցիոն տարբերակը․

const [value, setValue] = useState(() => {
  const saved = localStorage.getItem('value');
  return saved ? JSON.parse(saved) : 0;
});

Այս տարբերակը հաշվարկվում է միայն մեկ անգամ՝ սկզբնական render-ի ժամանակ։

---

🎯 Վարժություն (փորձիր ինքդ)

Գրիր կոմպոնենտ, որը․

1. Ցույց է տալիս քո անունը և տարիքը՝ state-ի միջոցով։
2. Կոճակ սեղմելիս ավելացնում է տարիքը մեկով։
3. Ունի Reset կոճակ, որը վերադառնում է սկզբնական վիճակին։

Փորձիր կիրառել callback setter և immutable update մոտեցումներ։

---

📘 Ամփոփում

• useState — React-ում state-ի հիմքն է։
• State-ի փոփոխությունը rerender է առաջացնում։
• Օգտագործիր ֆունկցիոնալ setter, երբ նոր state-ը կախված է հներից։
• Մի՛ փոփոխիր state-ը ուղղակիորեն, միշտ ստեղծիր copy։
• Կարող ես պահել primitive, object, array, կամ function state։

---