useRef और DOM हेरफेर

render की शुद्धता तोड़े बिना useRef के साथ DOM में हेरफेर करें और instance मान बनाए रखें।

7 मिनट · 3 प्रश्न

useRef एक परिवर्तनीय डिब्बा लौटाता है - एक अकेली current property वाली object - जिसकी identity हर render में बची रहती है। state से दो मूलभूत अंतर: ref.current को संशोधित करने से कोई re-render नहीं होता, और बदलाव तुरंत दिखाई देता है, अगले render की प्रतीक्षा किए बिना। इससे दो उपयोग परिवार निकलते हैं: एक DOM node का संदर्भ देना, और एक instance मान संग्रहीत करना जिसे प्रदर्शन को चलाए बिना renders के पार बचे रहना चाहिए।

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="search" />;
}

instance-मान की ओर, कोई भी चीज़ जिसे render उत्पन्न किए बिना बने रहना चाहिए वह एक ref में होनी चाहिए: setInterval द्वारा लौटाया गया id, किसी बाहरी लाइब्रेरी का instance (एक map, एक editor, एक video player), या किसी पिछले render का मान। सुनहरा नियम वही रहता है: rendering props और state का एक शुद्ध फ़ंक्शन होना चाहिए। Refs को effects और event handlers में पढ़ा और लिखा जाता है, render के दौरान नहीं।

import { useEffect, useRef } from "react";

function usePrevious(value) {
  const ref = useRef(undefined);

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}

अपने ख़ुद के कंपोनेंट से एक DOM node उजागर करने के लिए, ref को आगे पास करें: React 19 से, ref function कंपोनेंट का एक साधारण prop है; उससे पहले, forwardRef से होकर जाना अनिवार्य था। एक आख़िरी आदत विकसित करें: जब state परिणाम का वर्णन करने के लिए पर्याप्त हो तो declarative दृष्टिकोण को प्राथमिकता दें (एक CSS class, एक disabled attribute)। Refs को उस क्षेत्र के लिए सुरक्षित रखें जिसे React कवर नहीं करता: focus, text selection, किसी element को मापना, scrolling, media playback।

import { useRef } from "react";

function TextField({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

function Form() {
  const fieldRef = useRef(null);

  return (
    <>
      <TextField ref={fieldRef} />
      <button onClick={() => fieldRef.current.focus()}>
        Give focus
      </button>
    </>
  );
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. किसी मान को संग्रहीत करने के लिए useRef को useState से कौन सा मूलभूत अंतर अलग करता है?
   • ref.current को संशोधित करने से कोई re-render नहीं होता, state अपडेट के विपरीत
   • कंपोनेंट unmount होने के बाद useRef अपना मान बनाए रखता है
   • useRef केवल DOM nodes संग्रहीत कर सकता है
   • Refs एक कंपोनेंट के सभी instances के बीच साझा होते हैं
2. render के दौरान के बजाय useEffect में inputRef.current तक क्यों पहुँचें?
   • क्योंकि useEffect बेहतर performance के लिए DOM पहुँचों को बैच करता है
   • क्योंकि render के दौरान refs पढ़ने के लिए बंद रहते हैं
   • क्योंकि React केवल commit के बाद node को जोड़ता है: पहले render के दौरान, current अब भी null होता है
3. usePrevious(value) बिल्कुल पहले render पर क्या लौटाता है?
   • value का वर्तमान मान
   • undefined, क्योंकि ref में लिखने वाला effect अभी तक नहीं चला है
   • null
   • अगले render का मान