Introduction to Hooks in ReactJS In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में Hooks का concept React 16.8 version के साथ introduce किया गया था, जो React applications को build करने का तरीका बदल देता है।

Hooks का main purpose है functional components में भी वो functionalities add करना जो पहले सिर्फ class components में possible थी, जैसे कि state management और lifecycle methods.

इस topic में हम देखेंगे कि React Hooks क्या हैं, उनके types क्या हैं और उनका basic concept क्या है. यहां हम hooks के basic overview पर focus करेंगे ।

●●●

ReactJs Hooks In Hindi

Hooks एक special function है जो functional components में state और lifecycle methods का use करने कि सुविधा देते हैं। Hooks के आने के पहले, state और lifecycle methods को handle करने के लिए हमेशा class components का use होता था।

लेकिन hooks ने इस limitation को ख़त्म कर दिया, और अब हम functional components में भी state और lifecycle methods का use कर सकते हैं।

Basic Rule Of Hooks

Hooks को use करते वक्त कुछ basic rules को follow करना जरूरी है -

• Only Call Hooks at the Top Level: Hooks को हमेशा component के top level पर ही call करना चाहिए, मतलब कि loops, conditions, या nested functions के अंदर नहीं।

• Only Call Hooks from React Functions : Hooks को सिर्फ functional components या custom hooks के अंदर ही call करना चाहिए, किसी भी normal JavaScript function में नहीं।

Types of Hooks

React में mainly दो types के hooks होते हैं -

1. Built-in Hooks - जो React ने by default provide किये हैं।

2. Custom Hooks - जो हम अपनी requirements के according create कर सकते हैं।

अब हम इन दोनो types पर और React के commonly used hooks पर focus करेंगे।

●●●

ReactJs Built-In Hooks

React में कुछ commonly used built-in hooks होते हैं जो functional components में state और lifecycle methods को implement करने में help करते हैं।

कुछ important built-in hooks हैं -

• useState

• useEffect

• useContext

• useReducer

• useRef

• useMemo

• useCallback

●●●

ReactJs Hook Example

चलिए अब एक simple hook example देख लेते हैं।

File : src/components/Counter.js

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

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Explanation

• useState(0) के through हमने initial state count set कि जो 0 है।

• setCount function state को update करने के लिए use होता है, और जब भी button click होता है तो count increment हो जाता है।

●●●

बाकी next hooks को एक एक करके deeply समझेंगे।