प्रतिक्रिया useRefहुक

useRefहुक आपको रेंडरर्स के बीच मूल्यों को बनाए रखने की अनुमति देता है।

इसका उपयोग एक परिवर्तनशील मूल्य को संग्रहीत करने के लिए किया जा सकता है जो अद्यतन होने पर पुन: प्रस्तुत करने का कारण नहीं बनता है।

इसका उपयोग सीधे DOM तत्व तक पहुँचने के लिए किया जा सकता है।

पुन: प्रस्तुत करने का कारण नहीं है

यदि हमने यह गिनने की कोशिश की कि हमारा एप्लिकेशन हुक का उपयोग करके कितनी बार प्रस्तुत करता है useState, तो हम एक अनंत लूप में फंस जाएंगे क्योंकि यह हुक स्वयं फिर से प्रस्तुत करता है।

इससे बचने के लिए हम useRefहुक का इस्तेमाल कर सकते हैं।

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

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>Render Count: {count.current}</h1>
    </>
  );
}

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

useRef()केवल एक आइटम लौटाता है। यह नामक एक वस्तु देता है current।

जब हम इनिशियलाइज़ करते हैं तो हम useRefप्रारंभिक मान सेट करते हैं useRef(0):।

इसे अपने कंप्यूटर पर चलाएँ और एप्लिकेशन रेंडर काउंट में वृद्धि देखने के लिए इनपुट में टाइप करने का प्रयास करें।

डीओएम तत्वों तक पहुंचना

सामान्य तौर पर, हम रिएक्ट को सभी डोम हेरफेर को संभालने देना चाहते हैं।

लेकिन कुछ ऐसे उदाहरण हैं जहां useRefबिना किसी समस्या के उपयोग किया जा सकता है।

रिएक्ट में, हम refकिसी तत्व को सीधे DOM में एक्सेस करने के लिए एक विशेषता जोड़ सकते हैं।

import { useRef } from "react";
import ReactDOM from "react-dom";

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

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

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

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

ट्रैकिंग राज्य परिवर्तन

हुक का useRefउपयोग पिछले राज्य मूल्यों पर नज़र रखने के लिए भी किया जा सकता है।

ऐसा इसलिए है क्योंकि हम रेंडरर्स useRefके बीच मूल्यों को बनाए रखने में सक्षम हैं।

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

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>
    </>
  );
}

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

इस बार हम पिछली स्थिति पर नज़र रखने के लिए useState, useEffectऔर के संयोजन का उपयोग करते हैं ।useRef

में useEffect, हम हर बार इनपुट फ़ील्ड में टेक्स्ट दर्ज करके useRefवर्तमान मान को अपडेट कर रहे हैं।inputValue