useRef Hook — DOM-ի հետ աշխատանք և արժեքների պահպանում առանց rerender-ի

useRef hook-ը React-ում ունի երկու հիմնական դեր․

1. Թույլ է տալիս մուտք ունենալ DOM էլեմենտին (օրինակ՝ input focus անել կամ չափել չափսերը)։
2. Պահում է փոփոխական արժեք, որը չի առաջացնում rerender՝ ի տարբերություն state-ի։

useRef-ը վերադարձնում է օբյեկտ այս տեսքով՝

{ current: ... }

Այդ current հատկության մեջ React-ը պահում է reference-ը։

---

🔹 Սինտաքսը

const ref = useRef(initialValue);

• initialValue — սկզբնական արժեք, որը կպահվի ref-ի մեջ։
• ref.current — այն տեղն է, որտեղ պահվում է տվյալը կամ DOM հղումը։

---

📍 Օրինակ 1 — Focus input DOM-ի միջոցով

Սա ամենահայտնի և տարածված օրինակը է՝ ref-ի միջոցով input-ին մուտք գործելու։

import React, { useRef } from 'react';

export default function InputFocus() {
  const inputRef = useRef(null);

  function handleFocus() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} placeholder="Գրիր ինչ-որ բան..." />
      <button onClick={handleFocus}>Ֆոկուսացնել</button>
    </div>
  );
}

Այս օրինակում `inputRef.current`-ը հղվում է input DOM էլեմենտին։ Սեղմելով կոճակը՝ մենք programmatically ֆոկուսացնում ենք input-ը։

---

📍 Օրինակ 2 — ref որպես “persistent” արժեք

Եթե ցանկանում ես պահել փոփոխական, որը չի կորի rerender-ների ժամանակ, բայց նաև rerender չի առաջացնի, օգտագործիր ref։ Սա շատ օգտակար է՝ timers, previous values կամ metrics պահելու համար։

import React, { useRef, useState, useEffect } from 'react';

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

  useEffect(() => {
    renders.current = renders.current + 1;
  });

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

Այս օրինակում `renders.current` արժեքը պահպանում է render-ների քանակը, բայց rerender չի առաջացնում՝ նույնիսկ երբ փոփոխվում է։ Եթե նույն բանն անեինք state-ով, դա կբերեր անվերջ ռենդերին։

---

🧠 Ինչու ref-ը rerender չի առաջացնում

React-ը rerender է անում միայն այն դեպքում, երբ state կամ props են փոխվում։ Ref-ը հատուկ ստեղծված է “մշտական պահոց” լինելու համար՝ առանց rerender trigger անելու։ React-ը պարզապես հիշում է այդ արժեքը կոմպոնենտի ողջ կյանքի ընթացքում։

---

📍 Օրինակ 3 — Նախորդ state-ի արժեքի պահպանում

Սա պրոֆեսիոնալ օրինակ է՝ երբ ուզում ես իմանալ, թե ինչ էր state-ի նախորդ արժեքը։

import React, { useState, useEffect, useRef } from 'react';

export default function PreviousValue() {
  const [name, setName] = useState('');
  const prevName = useRef('');

  useEffect(() => {
    prevName.current = name; // պահպանենք նախորդ արժեքը
  }, [name]);

  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <p>Ընթացիկ անունը՝ {name}</p>
      <p>Նախորդ անունը՝ {prevName.current}</p>
    </div>
  );
}

Ամեն անգամ, երբ name-ը փոխվում է, մենք պահպանում ենք նախորդ արժեքը ref-ում։ Սա շատ հաճախ օգտագործվում է form validation-ի, comparison-ի կամ animations-ի ժամանակ։

---

⚙️ Օրինակ 4 — Interval պահպանում ref-ի միջոցով

Եթե setInterval-ը ստեղծվում է effect-ի մեջ, ref-ը կարող է օգնել պահպանել վերջին callback-ը՝ առանց նոր interval ստեղծելու ամեն render-ի ժամանակ։

import React, { useState, useEffect, useRef } from 'react';

export default function Timer() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    return () => clearInterval(intervalRef.current);
  }, []);

  return (
    <div>
      <p>Անցած ժամանակ՝ {seconds} վայրկյան</p>
      <button onClick={() => clearInterval(intervalRef.current)}>Դադարեցնել</button>
    </div>
  );
}

Ref-ը այստեղ պահում է interval-ի ID-ն, որպեսզի հեշտ լինի դադարեցնել այն, առանց state-ի փոփոխության։

---

⚡ useRef vs useState

useState	useRef
Փոփոխությունը rerender է առաջացնում։	Փոփոխությունը rerender չի առաջացնում։
Պահպանում է տվյալը՝ render-ի համար։	Պահպանում է տվյալը՝ կոմպոնենտի կյանքի ընթացքում։
Օգտագործվում է UI-ի թարմացման համար։	Օգտագործվում է DOM-ի կամ ներքին տվյալների համար։

---

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

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

1. Ունի input դաշտ և կոճակ, որը focus է անում input-ը։
2. Ցուցադրում է, թե քանի անգամ է rerender եղել կոմպոնենտը։
3. Պահպանում է նախորդ input-ի արժեքը։

Օգտագործիր միայն մեկ hook՝ useRef՝ երեք նպատակի համար։

---

📘 Ամփոփում

• useRef — React-ի hook, որը պահում է reference DOM-ի կամ տվյալների համար։
• Ref-ի փոփոխությունը rerender չի առաջացնում։
• Կարող ես օգտագործել DOM մանիպուլյացիաների, timers-ի և նախորդ արժեքների համար։
• Ref-ը React-ում հիշում է իր արժեքը կոմպոնենտի ողջ կյանքի ընթացքում։

---