दुर्भाग्य से, यूज़रेफ को कम आंका गया है। यह सबसे लोकप्रिय हुकों में से नहीं है, लेकिन यह फायदेमंद है। यह जानने से कि इसका उपयोग कैसे और कहां करना है, अच्छे परिणाम प्राप्त किए जा सकते हैं।

आइए बुनियादी बातों से शुरुआत करें

useRef एक रिएक्ट हुक है जो आपको रेंडरिंग के लिए आवश्यक मूल्य को संदर्भित करने की सुविधा देता है।

रिएक्ट आपके द्वारा यूज़रेफ के माध्यम से बनाए गए मूल्य को याद रखेगा, चाहे आप DOM में एक नोड या एक साधारण मूल्य को संदर्भित करने वाला जावास्क्रिप्ट ऑब्जेक्ट बना रहे हों, और यह पुन: प्रस्तुत करने के दौरान खो नहीं जाएगा।

यह हमें क्या देता है?

1. डोम तत्वों तक पहुंच:

   • आप DOM में तत्वों तक आसानी से पहुंच सकते हैं। उदाहरण के लिए, आप इनपुट फ़ील्ड का मान प्राप्त कर सकते हैं, विशिष्ट तत्वों पर ध्यान केंद्रित कर सकते हैं, उनकी ऊंचाई और चौड़ाई प्राप्त कर सकते हैं, स्क्रीन के किसी विशेष भाग तक स्क्रॉल कर सकते हैं, और भी बहुत कुछ।

2. परिवर्तनीय मान संग्रहीत करना:

   • आप घटकों को दोबारा प्रस्तुत किए बिना किसी भी आवश्यक डेटा को याद रख सकते हैं। उदाहरण के लिए, यदि आपको काउंटर या टाइमर की आवश्यकता है, तो यूज़स्टेट के बजाय यूज़रेफ चुनें।

उदाहरण

उपयोग की शक्ति को दर्शाने के लिए यहां कुछ उदाहरण दिए गए हैं।

उदाहरण 1: एक संख्या का संदर्भ

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current   1;
    refInputField.current.focus();
  }

  return (
    
      
        Click me!
      
      >
  );
};

export default Counter;

इस उदाहरण में:

• RefCount एक संख्या का परिवर्तनशील संदर्भ है।
• RefInputField एक इनपुट तत्व का संदर्भ है।
• जब बटन क्लिक किया जाता है, तो काउंटर बढ़ता है, और इनपुट फ़ील्ड फोकस प्राप्त करता है।

उदाहरण 2: पिछले मानों पर नज़र रखना

useRef के लिए एक अन्य सामान्य उपयोग का मामला पिछले मानों का ट्रैक रखना है।

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

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

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

  return (
    

      
Current Count: {count}
      
Previous Count: {prevCountRef.current}
       setCount(count   1)}>Increment
    
  );
};

export default PreviousValue;

इस उदाहरण में:

• prevCountRef गिनती के पिछले मान का ट्रैक रखता है।
• जब भी गिनती बदलती है, यूज़इफेक्ट हुक prevCountRef.current को अपडेट करता है।
• यह आपको अनावश्यक पुन: प्रस्तुतीकरण को ट्रिगर किए बिना वर्तमान और पिछली दोनों गणनाओं को प्रदर्शित करने की अनुमति देता है।

यूज़रेफ के साथ उन्नत युक्तियाँ और युक्तियाँ

1. रेंडरर्स में स्थायी मान

useRef का उपयोग यूज़स्टेट के विपरीत, पुन: रेंडर किए बिना रेंडरर्स में मानों को बनाए रखने के लिए किया जा सकता है। यह उन मानों को संग्रहीत करने के लिए विशेष रूप से उपयोगी है जो सीधे यूआई को प्रभावित नहीं करते हैं लेकिन याद रखने की आवश्यकता है।

उदाहरण: किसी घटक की रेंडर गिनती को ट्रैक करना।

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

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current  = 1;
  });

  return (
    

      
This component has rendered {renderCount.current} times
    
  );
};

export default RenderCounter;

2. तृतीय-पक्ष पुस्तकालयों के साथ एकीकरण

useRef तीसरे पक्ष के पुस्तकालयों के साथ काम करते समय अमूल्य है, जिन्हें DOM तत्वों के सीधे हेरफेर की आवश्यकता होती है, जैसे कि चार्टिंग पुस्तकालयों के साथ एकीकरण, वीडियो प्लेयर प्रबंधित करना, या एनिमेशन को संभालना।

उदाहरण: एक चार्ट लाइब्रेरी को एकीकृत करना।

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return ;
};

export default ChartComponent;

3. जटिल अनुप्रयोगों में अनावश्यक पुन: प्रस्तुतीकरण से बचना

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

उदाहरण: एक परिवर्तनशील स्थिति वस्तु को संग्रहीत करना।

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    

       updateName('Jane Doe')}>
        Update Name
      
    
  );
};

export default MutableState;

4. समापन संबंधी समस्याओं से बचना

useRef का उपयोग करने से रेंडरर्स में बने रहने वाले मान का एक स्थिर संदर्भ प्रदान करके क्लोजर समस्याओं से बचने में मदद मिल सकती है।

उदाहरण: पुरानी स्थिति से बचने के लिए उपयोग रेफरी के साथ टाइमर।

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

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current   1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return 
Count: {count}
;
};

export default Timer;

निष्कर्ष

हुक बढ़िया हैं, और आपको उनका उपयोग करना चाहिए। यदि आप समझते हैं कि रिएक्ट कैसे काम करता है और हुक सही तरीके से लागू करते हैं तो आप बहुत कुछ हासिल कर सकते हैं। useRef इसके लिए विशेष रूप से शक्तिशाली है:

• DOM तत्वों तक पहुंच और उनमें हेरफेर करना।
• परिवर्तनीय मानों को संग्रहीत करना जो पुन: प्रस्तुतीकरण को ट्रिगर नहीं करते हैं।
• रेंडर्स में स्थायी मान।
• तृतीय-पक्ष पुस्तकालयों के साथ एकीकरण।
• जटिल अनुप्रयोगों में अनावश्यक पुन: प्रस्तुतीकरण से बचना।
• बंद करने की समस्याओं को कम करना।

useRef को समझकर और उसका उपयोग करके, आप अधिक कुशल और प्रभावी रिएक्ट घटक लिख सकते हैं। हुक्स की असली शक्ति उनके व्यवहार को समझने और उन्हें विवेकपूर्ण तरीके से लागू करने में निहित है।

क्या आप जानते हैं, यूज़स्टेट हमेशा सही उत्तर नहीं होता है?