React.js all hooks tutorial with examples in hindi

 

React.js Hooks Tutorial in Hindi

React.js में Hooks एक महत्वपूर्ण फीचर हैं जो React के Functional Components के साथ स्टेट और लाइफसायकल फीचर्स को इस्तेमाल करने की सुविधा प्रदान करते हैं। Hooks React 16.8 में Introduce किए गए थे, और ये React के क्लास बेस्ड कंपोनेंट्स को Functional कंपोनेंट्स के साथ आसानी से रिप्लेस करने का एक तरीका देते हैं। इस ट्यूटोरियल में, हम React के सभी मुख्य Hooks के बारे में जानेंगे और उदाहरणों के साथ समझेंगे।

---

1. React Hooks क्या हैं?

React Hooks हमें Functional Components में स्टेट (State) और लाइफसायकल फीचर्स (Lifecycle Features) का उपयोग करने की अनुमति देते हैं। इससे पहले हमें ये सभी फीचर्स केवल Class Components में ही मिलते थे। Hooks के आने से Functional Components और भी पावरफुल हो गए हैं।

---

2. React Hooks के प्रकार

React में निम्नलिखित मुख्य प्रकार के Hooks होते हैं:

1. useState
2. useEffect
3. useContext
4. useReducer
5. useCallback
6. useMemo
7. useRef
8. useLayoutEffect
9. useImperativeHandle
10. Custom Hooks

---

3. useState Hook

useState Hook React में स्टेट मैनेजमेंट के लिए इस्तेमाल होता है। इसे Functional Components में स्टेट को ट्रैक करने के लिए उपयोग किया जाता है।

Syntax:

javascript
const [state, setState] = useState(initialValue);

• state: स्टेट वैरिएबल।
• setState: स्टेट को अपडेट करने वाली फंक्शन।
• initialValue: स्टेट की प्रारंभिक वैल्यू।

उदाहरण:

javascript
import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

यहां, count स्टेट है जिसे useState(0) द्वारा सेट किया गया है। setCount फंक्शन द्वारा हम इसे अपडेट कर सकते हैं।

---

4. useEffect Hook

useEffect Hook को साइड इफेक्ट्स (जैसे डेटा को लोड करना, DOM को अपडेट करना, या एपीआई कॉल्स करना) हैंडल करने के लिए उपयोग किया जाता है। यह React के class component lifecycle methods जैसे componentDidMount, componentDidUpdate, और componentWillUnmount की जगह कार्य करता है।

Syntax:

javascript
useEffect(() => {
  // Code to run when the component mounts or updates
}, [dependencies]);

• dependencies: यह एक array होता है जिसमें वो वैरिएबल्स होते हैं जिनके बदलने पर effect रन होगा। अगर इस array को खाली छोड़ा जाता है, तो effect केवल पहली बार चलेगा (componentDidMount जैसा)।

उदाहरण:

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    return () => clearInterval(timer);  // Cleanup on component unmount
  }, []);  // Empty dependency array means this effect runs once (componentDidMount)

  return (
    <div>
      <h1>Timer: {time} seconds</h1>
    </div>
  );
}

export default Timer;

इस उदाहरण में, useEffect का उपयोग एक सेकंड में टाइम को बढ़ाने के लिए किया गया है। जब कंपोनेंट अनमाउंट होगा, तो clearInterval द्वारा टाइमर को क्लियर कर दिया जाएगा।

---

5. useContext Hook

useContext Hook React Context API के साथ काम करता है और हमें ग्लोबल स्टेट या डेटा को कंपोनेंट्स के बीच शेयर करने में मदद करता है।

Syntax:

javascript
const contextValue = useContext(MyContext);

उदाहरण:

javascript
import React, { createContext, useContext } from 'react';

// Context Create
const ThemeContext = createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);  // useContext hook

  return (
    <div>
      <h1>The current theme is {theme}</h1>
    </div>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

export default App;

यहां, useContext Hook का उपयोग करके हम ThemeContext से डेटा ले रहे हैं। इस उदाहरण में, ThemedComponent को dark थीम मिलती है क्योंकि App में ThemeContext.Provider के अंदर यह सेट किया गया है।

---

6. useReducer Hook

useReducer Hook का उपयोग जटिल स्टेट लॉजिक को हैंडल करने के लिए किया जाता है। यह useState की तरह काम करता है लेकिन इसका उपयोग तब होता है जब आपको स्टेट ट्रांजिशन्स को नियंत्रित करने की आवश्यकता होती है।

Syntax:

javascript
const [state, dispatch] = useReducer(reducer, initialState);

उदाहरण:

javascript
import React, { useReducer } from 'react';

// Reducer function
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <h1>Count: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

यहां, हम useReducer का उपयोग करके एक कस्टम स्टेट मैनेजमेंट और एक reducer function बना रहे हैं। dispatch का उपयोग स्टेट को अपडेट करने के लिए किया जाता है।

---

7. useRef Hook

useRef Hook DOM एलिमेंट्स या किसी भी म्यूटेबल वैरिएबल्स के लिए एक संदर्भ (reference) प्रदान करता है। यह स्टेट की तरह रेंडर को ट्रिगर नहीं करता है, लेकिन यह DOM तत्वों को सॉर्ट करने या किसी म्यूटेबल वैरिएबल को स्टोर करने के लिए उपयोगी होता है।

Syntax:

javascript
const myRef = useRef(initialValue);

उदाहरण:

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

function FocusInput() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();  // Focus the input element
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

export default FocusInput;

इस उदाहरण में, हम useRef का उपयोग करके एक input को रेफर करते हैं और एक बटन के क्लिक पर उसे फोकस करते हैं।

---

8. useMemo Hook

useMemo Hook का उपयोग कैलकुलेटेड वैल्यूज़ को मेमोराइज करने के लिए किया जाता है ताकि वे अनावश्यक रूप से री-कैलकुलेट न हों। इसका इस्तेमाल प्रदर्शन (performance) को बेहतर बनाने के लिए किया जाता है।

Syntax:

javascript
const memoizedValue = useMemo(() => expensiveCalculation(a, b), [a, b]);

उदाहरण:

javascript
import React, { useMemo, useState } from 'react';

function ExpensiveComponent({ a, b }) {
  const memoizedValue = useMemo(() => a * b, [a, b]);

  return <h1>Result: {memoizedValue}</h1>;
}

function App() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  return (
    <div>
      <ExpensiveComponent a={a} b={b} />
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
    </div>
  );
}

export default App;

यहां, useMemo का उपयोग करके हम expensive calculation को मेमोराइज कर रहे हैं, ताकि जब a और b में बदलाव न हो, तब कैलकुलेशन को फिर से न किया जाए।

---

**9. useCallback Hook

useCallback Hook का उपयोग मेमोराइज्ड callback functions बनाने के लिए किया जाता है, ताकि unnecessary re-creations को रोका जा सके।

Syntax:

javascript
const memoizedCallback = useCallback(() => { /* code */ }, [dependencies]);

---

10. Conclusion

React Hooks ने Functional Components को और भी पावरफुल बना दिया है, जिससे React डेवलपर्स को ज्यादा लचीला और सरल तरीका मिलता है स्टेट, लाइफसायकल, और अन्य जरूरी कार्यों को करने के लिए। इसके माध्यम से React में बेहतर और अधिक मॉड्यूलर कोड लिखा जा सकता है, और इससे क्लास बेस्ड कंपोनेंट्स की तुलना में कड़ी परिश्रम और कोडिंग कम होती है