रिएक्ट useEvent: स्थिर इवेंट हैंडलर संदर्भ प्राप्त करना

रिएक्ट डेवलपर्स को अक्सर इवेंट हैंडलर्स से निपटने में चुनौतियों का सामना करना पड़ता है, खासकर डायनामिक कंपोनेंट्स और क्लोजर से जुड़े परिदृश्यों में। useEvent हुक, जो रिएक्ट इकोसिस्टम में अपेक्षाकृत नया है, इन मुद्दों का एक सुंदर समाधान प्रदान करता है, जिससे डेवलपर्स स्थिर इवेंट हैंडलर संदर्भ बना सकते हैं जो अनावश्यक री-रेंडर को ट्रिगर नहीं करते हैं।

समस्या को समझना: इवेंट हैंडलर्स की अस्थिरता

रिएक्ट में, कंपोनेंट्स तब री-रेंडर होते हैं जब उनके प्रॉप्स या स्टेट में बदलाव होता है। जब किसी इवेंट हैंडलर फ़ंक्शन को प्रॉप के रूप में पास किया जाता है, तो पैरेंट कंपोनेंट के हर रेंडर पर अक्सर एक नया फ़ंक्शन इंस्टेंस बनाया जाता है। यह नया फ़ंक्शन इंस्टेंस, भले ही उसका लॉजिक समान हो, रिएक्ट द्वारा अलग माना जाता है, जिससे उस चाइल्ड कंपोनेंट का री-रेंडर होता है जो इसे प्राप्त करता है।

इस सरल उदाहरण पर विचार करें:

import React, { useState } from 'react';

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

  const handleClick = () => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  };

  return (
    

      
      
Count: {count}
    
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return Click me;
}

export default ParentComponent;

इस उदाहरण में, ParentComponent के हर रेंडर पर handleClick को फिर से बनाया जाता है। भले ही ChildComponent को ऑप्टिमाइज़ किया गया हो (जैसे, React.memo का उपयोग करके), यह फिर भी री-रेंडर होगा क्योंकि onClick प्रॉप बदल गया है। इससे प्रदर्शन संबंधी समस्याएं हो सकती हैं, खासकर जटिल ऐप्लिकेशन्स में।

पेश है useEvent: समाधान

useEvent हुक इस समस्या को इवेंट हैंडलर फ़ंक्शन के लिए एक स्थिर संदर्भ प्रदान करके हल करता है। यह प्रभावी रूप से इवेंट हैंडलर को उसके पैरेंट कंपोनेंट के री-रेंडर साइकिल से अलग करता है।

हालांकि useEvent एक बिल्ट-इन रिएक्ट हुक नहीं है (रिएक्ट 18 तक), इसे आसानी से एक कस्टम हुक के रूप में लागू किया जा सकता है या, कुछ फ्रेमवर्क और लाइब्रेरी में, यह उनके यूटिलिटी सेट के हिस्से के रूप में प्रदान किया जाता है। यहाँ एक सामान्य कार्यान्वयन है:

import { useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // सिंक्रोनस अपडेट के लिए यहाँ useLayoutEffect महत्वपूर्ण है
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // निर्भरता ऐरे जानबूझकर खाली है, जो स्थिरता सुनिश्चित करता है
  ) as T;
}

export default useEvent;

स्पष्टीकरण:

• `useRef(fn)`: फ़ंक्शन `fn` के नवीनतम संस्करण को रखने के लिए एक रेफ बनाया जाता है। रेफ्स रेंडर के दौरान बने रहते हैं और उनके मान बदलने पर री-रेंडर का कारण नहीं बनते हैं।
• `useLayoutEffect(() => { ref.current = fn; })`: यह इफ़ेक्ट रेफ के वर्तमान मान को `fn` के नवीनतम संस्करण के साथ अपडेट करता है। useLayoutEffect सभी DOM म्यूटेशन के बाद सिंक्रोनस रूप से चलता है। यह महत्वपूर्ण है क्योंकि यह सुनिश्चित करता है कि किसी भी इवेंट हैंडलर को कॉल करने से पहले रेफ अपडेट हो जाए। `useEffect` का उपयोग करने से सूक्ष्म बग हो सकते हैं जहाँ इवेंट हैंडलर `fn` के पुराने मान को संदर्भित करता है।
• `useCallback((...args) => { return ref.current(...args); }, [])`: यह एक मेमोइज़्ड फ़ंक्शन बनाता है, जिसे कॉल किए जाने पर, रेफ में संग्रहीत फ़ंक्शन को लागू करता है। खाली निर्भरता ऐरे `[]` यह सुनिश्चित करता है कि यह मेमोइज़्ड फ़ंक्शन केवल एक बार बनाया गया है, जिससे एक स्थिर संदर्भ मिलता है। स्प्रेड सिंटैक्स `...args` इवेंट हैंडलर को किसी भी संख्या में तर्क स्वीकार करने की अनुमति देता है।

व्यवहार में useEvent का उपयोग करना

अब, आइए पिछले उदाहरण को useEvent का उपयोग करके रिफैक्टर करें:

import React, { useState, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // सिंक्रोनस अपडेट के लिए यहाँ useLayoutEffect महत्वपूर्ण है
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // निर्भरता ऐरे जानबूझकर खाली है, जो स्थिरता सुनिश्चित करता है
  ) as T;
}

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

  const handleClick = useEvent(() => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  });

  return (
    

      
      
Count: {count}
    
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return Click me;
}

export default ParentComponent;

handleClick को useEvent से लपेटकर, हम यह सुनिश्चित करते हैं कि ChildComponent को ParentComponent के रेंडर के दौरान वही फ़ंक्शन संदर्भ प्राप्त हो, भले ही count स्टेट बदल जाए। यह ChildComponent के अनावश्यक री-रेंडर को रोकता है।

useEvent का उपयोग करने के लाभ

• प्रदर्शन अनुकूलन: चाइल्ड कंपोनेंट्स के अनावश्यक री-रेंडर को रोकता है, जिससे प्रदर्शन में सुधार होता है, खासकर कई कंपोनेंट्स वाले जटिल ऐप्लिकेशन्स में।
• स्थिर संदर्भ: गारंटी देता है कि इवेंट हैंडलर रेंडर के दौरान एक सुसंगत पहचान बनाए रखते हैं, जिससे कंपोनेंट जीवनचक्र प्रबंधन सरल होता है और अप्रत्याशित व्यवहार कम होता है।
• सरल लॉजिक: स्थिर इवेंट हैंडलर संदर्भ प्राप्त करने के लिए जटिल मेमोइज़ेशन तकनीकों या वर्कअराउंड की आवश्यकता को कम करता है।
• बेहतर कोड पठनीयता: यह स्पष्ट रूप से इंगित करके कोड को समझने और बनाए रखने में आसान बनाता है कि एक इवेंट हैंडलर का एक स्थिर संदर्भ होना चाहिए।

useEvent के उपयोग के मामले

• इवेंट हैंडलर्स को प्रॉप्स के रूप में पास करना: सबसे आम उपयोग का मामला, जैसा कि उपरोक्त उदाहरणों में दिखाया गया है। चाइल्ड कंपोनेंट्स को इवेंट हैंडलर्स को प्रॉप्स के रूप में पास करते समय स्थिर संदर्भ सुनिश्चित करना अनावश्यक री-रेंडर को रोकने के लिए महत्वपूर्ण है।
• useEffect में कॉलबैक: useEffect कॉलबैक के भीतर इवेंट हैंडलर्स का उपयोग करते समय, useEvent हैंडलर को निर्भरता ऐरे में शामिल करने की आवश्यकता को रोक सकता है, जिससे निर्भरता प्रबंधन सरल हो जाता है।
• तृतीय-पक्ष लाइब्रेरी के साथ एकीकरण: कुछ तृतीय-पक्ष लाइब्रेरी अपने आंतरिक अनुकूलन के लिए स्थिर फ़ंक्शन संदर्भों पर निर्भर हो सकती हैं। useEvent इन लाइब्रेरी के साथ संगतता सुनिश्चित करने में मदद कर सकता है।
• कस्टम हुक: इवेंट श्रोताओं का प्रबंधन करने वाले कस्टम हुक बनाने में अक्सर useEvent का उपयोग करने से लाभ होता है ताकि उपभोग करने वाले कंपोनेंट्स को स्थिर हैंडलर संदर्भ प्रदान किया जा सके।

विकल्प और विचार

हालांकि useEvent एक शक्तिशाली टूल है, लेकिन ध्यान में रखने के लिए वैकल्पिक दृष्टिकोण और विचार भी हैं:

• खाली निर्भरता ऐरे के साथ `useCallback`: जैसा कि हमने useEvent के कार्यान्वयन में देखा, एक खाली निर्भरता ऐरे के साथ useCallback एक स्थिर संदर्भ प्रदान कर सकता है। हालांकि, यह कंपोनेंट के री-रेंडर होने पर फ़ंक्शन बॉडी को स्वचालित रूप से अपडेट नहीं करता है। यहीं पर useEvent उत्कृष्टता प्राप्त करता है, रेफ को अपडेट रखने के लिए useLayoutEffect का उपयोग करके।
• क्लास कंपोनेंट्स: क्लास कंपोनेंट्स में, इवेंट हैंडलर्स को आमतौर पर कंस्ट्रक्टर में कंपोनेंट इंस्टेंस से बाइंड किया जाता है, जो डिफ़ॉल्ट रूप से एक स्थिर संदर्भ प्रदान करता है। हालांकि, आधुनिक रिएक्ट डेवलपमेंट में क्लास कंपोनेंट्स कम आम हैं।
• React.memo: हालांकि React.memo कंपोनेंट्स के री-रेंडर को तब रोक सकता है जब उनके प्रॉप्स नहीं बदले हैं, यह केवल प्रॉप्स की एक सतही तुलना करता है। यदि इवेंट हैंडलर प्रॉप हर रेंडर पर एक नया फ़ंक्शन इंस्टेंस है, तो React.memo री-रेंडर को नहीं रोकेगा।
• अति-अनुकूलन: अति-अनुकूलन से बचना महत्वपूर्ण है। useEvent लागू करने से पहले और बाद में प्रदर्शन को मापें ताकि यह सुनिश्चित हो सके कि यह वास्तव में एक लाभ प्रदान कर रहा है। कुछ मामलों में, useEvent का ओवरहेड प्रदर्शन लाभ से अधिक हो सकता है।

अंतर्राष्ट्रीयकरण और अभिगम्यता संबंधी विचार

जब वैश्विक दर्शकों के लिए रिएक्ट ऐप्लिकेशन्स विकसित कर रहे हों, तो अंतर्राष्ट्रीयकरण (i18n) और अभिगम्यता (a11y) पर विचार करना महत्वपूर्ण है। useEvent स्वयं सीधे i18n या a11y को प्रभावित नहीं करता है, लेकिन यह अप्रत्यक्ष रूप से उन कंपोनेंट्स के प्रदर्शन में सुधार कर सकता है जो स्थानीयकृत सामग्री या अभिगम्यता सुविधाओं को संभालते हैं।

उदाहरण के लिए, यदि कोई कंपोनेंट स्थानीयकृत टेक्स्ट प्रदर्शित करता है या वर्तमान भाषा के आधार पर ARIA विशेषताओं का उपयोग करता है, तो यह सुनिश्चित करना कि उस कंपोनेंट के भीतर इवेंट हैंडलर स्थिर हैं, भाषा बदलने पर अनावश्यक री-रेंडर को रोक सकता है।

उदाहरण: स्थानीयकरण के साथ useEvent

import React, { useState, useContext, createContext, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // सिंक्रोनस अपडेट के लिए यहाँ useLayoutEffect महत्वपूर्ण है
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // निर्भरता ऐरे जानबूझकर खाली है, जो स्थिरता सुनिश्चित करता है
  ) as T;
}

const LanguageContext = createContext('en');

function LocalizedButton() {
  const language = useContext(LanguageContext);
  const [text, setText] = useState(getLocalizedText(language));

  const handleClick = useEvent(() => {
    console.log('Button clicked in', language);
    // भाषा के आधार पर कुछ कार्रवाई करें
  });

  function getLocalizedText(lang) {
      switch (lang) {
        case 'en':
          return 'Click me';
        case 'fr':
          return 'Cliquez ici';
        case 'es':
          return 'Haz clic aquí';
        default:
          return 'Click me';
      }
    }

    //भाषा परिवर्तन का अनुकरण करें
    React.useEffect(()=>{
        setTimeout(()=>{
            setText(getLocalizedText(language === 'en' ? 'fr' : 'en'))
        }, 2000)
    }, [language])

  return {text};
}

function App() {
  const [language, setLanguage] = useState('en');

  const toggleLanguage = useCallback(() => {
    setLanguage(language === 'en' ? 'fr' : 'en');
  }, [language]);

  return (
    
      

        
        Toggle Language
      
    
  );
}

export default App;

इस उदाहरण में, LocalizedButton कंपोनेंट वर्तमान भाषा के आधार पर टेक्स्ट प्रदर्शित करता है। handleClick हैंडलर के लिए useEvent का उपयोग करके, हम यह सुनिश्चित करते हैं कि भाषा बदलने पर बटन अनावश्यक रूप से री-रेंडर न हो, जिससे प्रदर्शन और उपयोगकर्ता अनुभव में सुधार होता है।

निष्कर्ष

useEvent हुक रिएक्ट डेवलपर्स के लिए प्रदर्शन को अनुकूलित करने और कंपोनेंट लॉजिक को सरल बनाने के लिए एक मूल्यवान टूल है। स्थिर इवेंट हैंडलर संदर्भ प्रदान करके, यह अनावश्यक री-रेंडर को रोकता है, कोड की पठनीयता में सुधार करता है, और रिएक्ट ऐप्लिकेशन्स की समग्र दक्षता को बढ़ाता है। हालांकि यह एक बिल्ट-इन रिएक्ट हुक नहीं है, इसका सीधा कार्यान्वयन और महत्वपूर्ण लाभ इसे किसी भी रिएक्ट डेवलपर के टूलकिट में एक सार्थक जोड़ बनाते हैं।

useEvent के पीछे के सिद्धांतों और इसके उपयोग के मामलों को समझकर, डेवलपर्स वैश्विक दर्शकों के लिए अधिक प्रदर्शनशील, रखरखाव योग्य और स्केलेबल रिएक्ट ऐप्लिकेशन्स बना सकते हैं। ऑप्टिमाइज़ेशन तकनीकों को लागू करने से पहले हमेशा प्रदर्शन को मापें और अपने ऐप्लिकेशन की विशिष्ट आवश्यकताओं पर विचार करें।