React useRef hooki

useRef hooki renderlar orasidagi qiymatlarni saqlab qolish imkonini beradi.

U qiymat o‘zgarganda qayta render (re-render) qilishga sabab bo‘lmaydigan o‘zgaruvchi qiymatni saqlash uchun ishlatiladi.

U to‘g‘ridan-to‘g‘ri DOM elementiga kirish uchun ishlatilishi mumkin.

Qayta render (re-render) qilishga sabab bo‘lmaydi

Agar biz useState Hook yordamida ilovamiz necha marta renderlashini hisoblashga harakat qilsak, biz cheksiz siklga tushib qolamiz, chunki bu Hookning o‘zi qayta renderga sabab bo‘ladi.

Buning oldini olish uchun useRef Hook-dan foydalanishimiz mumkin.

import { useState, useRef, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

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

  return (
    <>
      <p>Type in the input field:</p>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

useRef() faqat bitta elementni qaytaradi. U current nomli obyektni qaytaradi.

useRef ni ishga tushirganimizda biz boshlang‘ich qiymatni o‘rnatamiz: useRef(0) .

DOM elementlariga kirish

useRef hooki ko‘pincha ishlatiladi to‘g‘ridan-to‘g‘ri DOM elementlariga kirish.

Birinchidan, useRef Hook yordamida ref yaratamiz: const inputElement = useRef();.

Keyin, JSX da ref atributidan foydalanib, biz ref ni DOM elementiga biriktiramiz: <input type="text" ref={inputElement} /> .

Nihoyat, joriy xususiyat yordamida DOM elementiga kirishimiz mumkin: inputElement.current.

import { useRef } from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

Misolda, tugma bosilganda kiritish maydoni diqqatni tortadi, chunki onClick funksiyasi inputElement.current.focus() ni chaqiradi.

State o‘zgarishlarini kuzatish

useRef hookidan oldingi holat qiymatlarini kuzatish uchun ham foydalanish mumkin.

Buning sababi, biz renderlar orasida useRef qiymatlarini saqlab qolishimiz mumkin.

import { useRef, useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

Bu safar oldingi holatni kuzatish uchun useState, useEffect va useRef kombinatsiyasidan foydalanamiz.

useEffect da biz kiritish maydoniga matn kiritish orqali inputValue har safar yangilanganda useRef joriy qiymatini yangilaymiz.