React useRef Hook Example

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में useRef hook एक ऐसा hook है जो React elements या DOM elements को directly reference करने के लिए use होता है बिना component के re-render किये।

यह hook mostly DOM elements को access और manipulate करने के लिए useful होता है। जब हमें किसी input field पर focus set करना हो, previous state store करनी हो, या कुछ values को store करना हो जो re-render के बीच persist रहनी चाहिए, तब useRef का use किया जाता है।

●●●

What is useRef Hook ?

React में useRef hook का use DOM elements को directly reference करने के लिए होता है, जैसे कि किसी input field को focus करना या किसी HTML element को direct access करना।

useRef का एक और important use है mutable values को hold करना जो component के re-render hone पर भी persist रहती हैं।

जब भी हम useRef को call करते हैं, ये एक object return करता है जिसमे एक current property होती है। इस current property में हम वो element या value store कर सकते हैं जो re-renders के बीच change नहीं होती।

useRef Hook Syntax

const myRef = useRef(initialValue);

• myRef : यह reference variable है जो एक mutable object hold करता है और current property के साथ DOM element या value को store करता है।

• initialValue : ये optional है, अगर आप किसी specific initial value को reference के लिए set करना चाहते हैं तो इससे define कर सकते हैं।

●●●

React useRef Example To Access DOM Element

एक common use-case है input field को focus करना जब component load हो। useRef के साथ हम इस task को efficiently कर सकते हैं।

File : src/components/FocusInput.js

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

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // Set focus on the input field when component mounts
  }, []);

  return (
    <div>
      <h2>Focus Input Example</h2>
      <input ref={inputRef} type="text" placeholder="Focus will be here on load" />
    </div>
  );
}

export default FocusInput;

Explanation

• useRef का use करके हमने inputRef variable create किया है जो input element को reference करता है।

• useEffect hook को empty dependency array [] के साथ use किया गया है ताकि component के mount hone पर input field पर focus set हो जाये।

• inputRef.current.focus() के through directly input field पर focus set किया गया है।

●●●

Tracking Previous State with useRef

React में useRef का use किसी भी state कि previous value को store करने के लिए भी किया जा सकता है। क्योंकि useRef values को re-render के बीच persist रखता है, हम इससे previous state या किसी भी old value को track कर सकते हैं।

File : src/components/PreviousCounter.js

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

function PreviousCounter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(0);

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    <div>
      <h2>Current Count: {count}</h2>
      <h3>Previous Count: {prevCountRef.current}</h3>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default PreviousCounter;

Explanation

• prevCountRef में previous count value को store किया गया है।

• useEffect में जब भी count update होता है, prevCountRef.current को current count कि value assign कि जाती है।

• prevCountRef re-renders के बीच अपनी value को persist रखता है और Previous Count को track करता है।

●●●

useRef as a Mutable Variable

React में state changes पर component re-render होता है, लेकिन useRef कि property current को directly change करना re-render को trigger नहीं करता।

अगर हमें किसी variable को re-render के बिना update करना हो, तो useRef का use कर सकते हैं।

File : src/components/Stopwatch.js

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

function Stopwatch() {
  const [time, setTime] = useState(0);
  const intervalRef = useRef(null);

  const start = () => {
    if (intervalRef.current === null) {
      intervalRef.current = setInterval(() => {
        setTime((prevTime) => prevTime + 1);
      }, 1000);
    }
  };

  const stop = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  };

  const reset = () => {
    stop();
    setTime(0);
  };

  return (
    <div>
      <h2>Stopwatch: {time} seconds</h2>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Stopwatch;

Explanation

• intervalRef mutable variable कि तरह act करता है जो interval ID को store करता है बिना re-render किये।

• start function check करता है कि interval running है या नहीं। अगर नहीं है तो interval start करता है और time को increment करता है।

• stop function interval को clear करता है और intervalRef.current को null set करता है।

• reset function stop करके time को 0 reset करता है।

●●●

Using useRef with Event Listeners

अगर हमें किसी DOM element पर event listeners लगानी हो या DOM manipulation करना हो, तो useRef का use किया जा सकता है।

ये React में uncontrolled components या direct DOM manipulation के लिए काफी helpful है।

File : src/components/CustomButton.js

Copy
import React, { useRef } from 'react';

function CustomButton() {
  const buttonRef = useRef(null);

  const handleClick = () => {
    buttonRef.current.style.backgroundColor = 'lightgreen';
    buttonRef.current.innerText = 'Clicked!';
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Click Me
    </button>
  );
}

export default CustomButton;

Explanation

• buttonRef button element को reference करता है।

• handleClick function के अंदर buttonRef.current का use करके button का background color और text change किया गया है।

• buttonRef.current.style.backgroundColor के through directly DOM manipulation कि गयी है।

●●●

Advantages of Using useRef

• Avoids Re-Renders : useRef का use mutable values को store करने के लिए किया जा सकता है बिना re-render trigger किये।

• Access तो DOM Elements : ये React elements या DOM elements को directly access और manipulate करने में help करता है।

• Storing Previous Values : useRef का use previous state values या previous rendered values को store करने के लिए किया जा सकता है।

• Timers और Intervals Manage करना : useRef का use interval और timers को store और manage करने के लिए भी होता है, जैसे stopwatch या timer functionality में।

●●●