Hooks in React in Hindi: रिएक्ट में हुक ऐसे फ़ंक्शन हैं जो आपको classes का उपयोग किए बिना फ़ंक्शन घटकों में state और अन्य रिएक्ट सुविधाओं का उपयोग करने की अनुमति देते हैं। उदाहरणों में useState और useEffect शामिल हैं।
Hooks रिएक्ट को इतना बेहतर बनाते हैं क्योंकि आपके पास सरल कोड है जो समान कार्यक्षमताओं को तेजी से और अधिक प्रभावी ढंग से लागू करता है। आप classes को लिखे बिना react state और जीवनचक्र विधियों को भी लागू कर सकते हैं।
मूल रूप से, React मुख्य रूप से class components का उपयोग करता है, जो कई बार ज़ोरदार हो सकता है क्योंकि आपको हमेशा classes, उच्च-क्रम के components के बीच स्विच करना पड़ता है, और props प्रस्तुत करना पड़ता है।
React hooks के साथ, अब आप इन सभी को बिना स्विच किए, functional components का उपयोग करके कर सकते हैं।
आइए Hooks को अच्छी तरह से समझने के लिए React क्या है कैसे कम करता है, JSX, React components, State, Props, और Event handling को पहले समझें।
Table of Contents
React में Hooks क्या है (What is Hooks in React in Hindi)
मूल रूप से, Hooks रिएक्ट 16.8 संस्करण में पेश किया गया नया feature है। Hooks आपको एक class लिखे बिना state और अन्य प्रतिक्रिया सुविधाओं का उपयोग करने की अनुमति देता है।
हुक वे कार्य हैं जो React state में “hook” करते हैं और फ़ंक्शन घटकों से जीवनचक्र की विशेषताएं हैं। यह classes के अंदर काम नहीं करता है।
Hooks पिछड़े-संगत हैं, जिसका अर्थ है कि इसमें कोई ब्रेकिंग परिवर्तन नहीं है। साथ ही, यह रिएक्ट अवधारणाओं के आपके ज्ञान को प्रतिस्थापित नहीं करता है।
रिएक्ट class और functional components को चित्रित करने के लिए कोड उदाहरण नीचे दिए गए हैं।
import React, { Component } from 'react'
export default class Hello extends Component {
render() {
return(
<div>
Hello TutorialinHindi!
</div>
)
}
}
उपेर दिए गए कोड एक class component है। जो DOM में “Hello TutorialinHindi!” प्रिंट करता है।
import React from 'react'
export default function Hello() {
return (
<div>
Hello TutorialinHindi!
</div>
)
}
उपरोक्त कोड एक functional component है जो DOM पर “Hello TutorialinHindi!” प्रिंट करता है।
उपरोक्त कोड के दोनों सेटों की तुलना में, functional component में काफी सरल कोड होता है जो समान कार्य करता है; class instance के लिए स्थान आवंटित करने की कोई आवश्यकता नहीं है, फिर एक render() फ़ंक्शन को कॉल करें, आप केवल फ़ंक्शन को कॉल करें।
रिएक्ट हुक के बहुत सारे लाभ और कार्य हैं जो वे करते हैं, लेकिन उनमें से एक बड़ा है React lifecycle के तरीकों को आसान बनाना।
Hooks का उदाहरण (Example of Hooks in Hindi)
यहाँ एक हुक का एक उदाहरण है। अगर इसका कोई मतलब नहीं है तो चिंता न करें:
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
इसका output कुछ इस तरह दिखेगा:
आपको React से हुक import करना होगा।
यहां हम एप्लिकेशन state का track रखने के लिए useState hook का उपयोग कर रहे हैं।
State आमतौर पर एप्लिकेशन डेटा या गुणों को संदर्भित करता है जिन्हें ट्रैक करने की आवश्यकता होती है।
Hook का उपयोग कब करें?
यदि आप एक function component लिखते हैं, और फिर आप इसमें कुछ state जोड़ना चाहते हैं, तो पहले आप इसे एक class में परिवर्तित करके करते हैं।
लेकिन, अब आप इसे मौजूदा फ़ंक्शन घटक के अंदर एक hook का उपयोग करके कर सकते हैं।
हुक के नियम (Rules of Hooks in React in Hindi)
मूल रूप से, Hooks के लिए 3 नियम हैं:
- Hooks को केवल React function components के अंदर ही बुलाया जा सकता है।
- हुक को केवल एक घटक के top leve पर ही बुलाया जा सकता है।
- Hooks conditional नहीं हो सकते।
नोट: रिएक्ट class के घटकों में hooks काम नहीं करेगा।
React useState Hook in Hindi
रिएक्ट useState हुक हमें फ़ंक्शन घटक में state को ट्रैक करने की अनुमति देता है।
State आम तौर पर डेटा या properties को संदर्भित करता है जिन्हें किसी एप्लिकेशन में ट्रैक करने की आवश्यकता होती है।
useState hook का उपयोग करने के लिए, हमें पहले इसे अपने घटक में import करना होगा। उदाहरण के लिए:
import { useState } from "react";React useEffect Hooks in Hindi
useEffect Hook आपको अपने components में side effects करने की अनुमति देता है।
साइड इफेक्ट के कुछ उदाहरण हैं: fetching data, timers और सीधे DOM को अपडेट करना।
useEffect दो arguments स्वीकार करता है। दूसरा तर्क वैकल्पिक है।
useEffect(<function>, <dependency>)React useReducer Hook in Hindi
useReducer कस्टम स्टेट लॉजिक की अनुमति देता है। मूल रूप से, useReducer Hook, useState Hook के जैसा है।
यदि आप जटिल तर्क पर निर्भर state के कई हिस्सों पर नज़र रखते हैं, तो useReducer उपयोगी हो सकता है।
मूल रूप से, useReducer Hook दो तर्कों (arguments) को स्वीकार करता है:
useReducer(<reducer>, <initialState>)reducer फ़ंक्शन में आपका कस्टम स्टेट लॉजिक होता है और initialState एक साधारण मान हो सकता है लेकिन आम तौर पर इसमें एक ऑब्जेक्ट होता है।
useReducer Hook वर्तमान state और एक dispatch विधि (method) लौटाता है।
कस्टम हुक क्या है (React Custom Hooks in Hindi)
मूल रूप से, Hooks reusable functions हैं। जब आपके पास component logic होता है जिसे multiple components द्वारा उपयोग करने की आवश्यकता होती है, तो हम उस तर्क (logic) को एक Custom Hooks में निकाल सकते हैं।
यदि आपके पास stateful logic है जिसे कई घटकों में पुन: उपयोग करने की आवश्यकता है, तो आप अपने खुद के कस्टम हुक बना सकते हैं।
कस्टम हुक “use” से शुरू होते हैं। उदाहरण के लिए: useFetch का उपयोग करें।
निष्कर्ष
Hooks के साथ, आप एक घटक से स्टेटफुल लॉजिक निकाल सकते हैं ताकि इसे स्वतंत्र रूप से परीक्षण किया जा सके और पुन: उपयोग किया जा सके।
मूल रूप से, Hooks आपको अपने घटक पदानुक्रम को बदले बिना stateful logic का पुन: उपयोग करने की अनुमति देता है। इससे हुक को कई घटकों के बीच या समुदाय के साथ साझा करना आसान हो जाता है।
मुझे उम्मीद है कि यह लेख “Hooks in React in Hindi”, आपको React Hooks concepts को आसानी से समझने में मदद करेगा।