मुझे समझाएं रिएक्ट हुक

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

कस्टम हुक की क्या आवश्यकता है?

कस्टम रिएक्ट हुक आपको कई घटकों में तर्क निकालने और पुन: उपयोग करने की अनुमति देता है। वे किसी फ़ंक्शन में स्टेटफुल लॉजिक को समाहित करके घटकों को साफ रखने और दोहराव को कम करने में मदद करते हैं। कस्टम हुक बिल्ट-इन हुक के समान नियमों का पालन करते हैं (उदाहरण के लिए, वे अन्य हुक जैसे यूज़स्टेट, यूज़इफ़ेक्ट इत्यादि का उपयोग कर सकते हैं)।

मुझे कोड दिखाओ:

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(value=>value   1);
  const decrement = () => setCount(value=>value - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    

      
{count}
      Increment
      Decrement
      Reset
    
  );
};

कस्टम हुक के लिए नियम

केवल शीर्ष स्तर पर हुक कॉल करें: लूप, स्थितियों या नेस्टेड फ़ंक्शन के अंदर हुक कॉल न करें।

केवल रिएक्ट फ़ंक्शन से कॉल हुक: हुक का उपयोग कार्यात्मक घटकों या अन्य कस्टम हुक में किया जाना चाहिए।