هوک useRef در React

هوک useRef در React

هوک useRef یک هوک داخلی در React است که به شما اجازه می‌دهد یک ارجاع تغییرپذیر ایجاد کنید که در طول رندرهای مختلف کامپوننت پایدار باقی بماند. این هوک معمولاً برای دسترسی مستقیم به عناصر DOM یا ذخیره داده‌های تغییرپذیر که باعث رندر مجدد کامپوننت نمی‌شوند، استفاده می‌شود.

نکات کلیدی:

1. رندر مجدد را ایجاد نمی‌کند
   تغییر مقدار یک شیء useRef باعث رندر مجدد کامپوننت نمی‌شود.
2. مقدار پایدار
   مقدار شیء useRef در طول رندرهای مختلف پایدار باقی می‌ماند.
3. دسترس‌پذیری به عناصر DOM
   useRef معمولاً برای دستکاری مستقیم عناصر DOM استفاده می‌شود.

سینتکس:

const refContainer = useRef(initialValue);

• initialValue: مقدار اولیه برای شیء ref.
• refContainer شیء‌ای است که یک ویژگی به نام current دارد.

موارد استفاده:

1. دسترس‌پذیری به عناصر DOM

شما می‌توانید از useRef برای دسترسی و دستکاری مستقیم یک عنصر DOM استفاده کنید.

import React, { useRef } from ‘react’;

function FocusInput() {

    const inputRef = useRef(null);

    const handleFocus = () => {

           inputRef.current.focus();

  };

   return (

      <div>

            <input ref={inputRef} type=“text” />

            <button onClick={handleFocus}>Focus Input</button>

       </div>

    );

}

export default FocusInput;

• inputRef.current به عنصر DOM ورودی اشاره می‌کند.
• متد focus به‌طور مستقیم روی عنصر ورودی فراخوانی می‌شود.

2. ذخیره مقادیر تغییرپذیر

شما می‌توانید یک مقدار را در useRef ذخیره کنید که تغییر آن باعث رندر مجدد نمی‌شود.

import React, { useRef, useState } from ‘react’;

function Timer() {

  const timerRef = useRef(0);

  const [count, setCount] = useState(0);

   const increment = () => {

          timerRef.current += 1;

          setCount(timerRef.current);

};

return (

       <div>

                <p>Timer: {count}</p>

                <button onClick={increment}>Increment</button>

      </div>

);

}

export default Timer;

• timerRef.current بدون رندر مجدد کامپوننت به‌روز می‌شود.

3. حفظ مقادیر بین رندرها

useRef می‌تواند مرجعی به مقداری ایجاد کند که بین رندرها پایدار باقی بماند ولی باعث رندر مجدد نشود.

import React, { useRef, useEffect } from ‘react’;

function RenderCounter() {

      const renderCount = useRef(0);

    useEffect(() => {

           renderCount.current += 1;

});

      return <p>Render Count: {renderCount.current}</p>;

}

export default RenderCounter;