useRef

React useRef Hook

useRef Hook

useRef Hook qiymatlarni renderlar orasida saqlash imkonini beradi.

Bu yangilanganida qayta render bo'lmaydigan o'zgarmas qiymatlarni saqlash uchun ishlatilishi mumkin.

Shuningdek, u DOM elementiga to'g'ridan-to'g'ri kirish uchun ishlatilishi mumkin.

Qayta Renderlarni Keltirmaydi

Agar biz useState Hook yordamida ilovamiz necha marta render bo'lishini hisoblashga harakat qilsak, bu Hook o'zi qayta renderni chaqirishi tufayli cheksiz siklga tushishimiz mumkin.

Buni oldini olish uchun, useRef Hook-dan foydalanishimiz mumkin.

Misol

Ilova renderlarini hisoblash uchun useRef dan foydalanish:

import { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
 
function App() {
  const [inputValue, setInputValue] = useState('');
  const count = useRef(0);
 
  useEffect(() => {
    count.current = count.current + 1;
  });
 
  return (
    <>
      <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      <h1>Renderlar soni: {count.current}</h1>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

useRef() faqat bitta narsani qaytaradi. U current deb nomlangan obyektni qaytaradi.

useRefni inicializatsiya qilayotganda boshlang'ich qiymatni o'rnatamiz: useRef(0).

Bu, shunday qilib bajarish bilan teng: const count = {current: 0}. Biz countni count.current orqali kirishimiz mumkin.

Bu kodni kompyuteringizda ishlating va input maydoniga yozishni sinab ko'ring, ilovaning renderlar soni oshishini ko'rasiz.

DOM Elementlariga Kirish

Umuman olganda, React barcha DOM manipulyatsiyasini boshqarishini xohlaymiz.

Ammo ba'zi hollarda useRef muammosiz ishlatilishi mumkin.

Reactda, biz DOM-da to'g'ridan-to'g'ri kirish uchun elementga ref atributini qo'shishimiz mumkin.

Misol

Input maydonini fokuslash uchun useRef dan foydalanish:

import { useRef } from 'react';
import ReactDOM from 'react-dom/client';
 
function App() {
  const inputElement = useRef();
 
  const focusInput = () => {
    inputElement.current.focus();
  };
 
  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Inputni Fokuslash</button>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Holat O'zgarishlarini Kuzatish

useRef Hook, shuningdek, oldingi holat qiymatlarini kuzatish uchun ishlatilishi mumkin.

Bu, useRef qiymatlarini renderlar orasida saqlashimiz mumkinligi sababli.

Misol

Oldingi holat qiymatlarini kuzatish uchun useRef dan foydalanish:

import { useState, useEffect, useRef } from 'react';
import ReactDOM 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>Hozirgi Qiymat: {inputValue}</h2>
      <h2>Oldingi Qiymat: {previousInputValue.current}</h2>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

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

useEffect ichida biz inputValue yangilangan har safar useRef-ning joriy qiymatini yangilaymiz.