React Hooks Kya Hain aur Kyun Zaroori Hain (Complete Intro in Hindi)

React Hooks kya hain aur inhe seekhna kyun zaroori hai? Is complete guide mein hum state management, side effects aur components ko handle karna seekhenge.

Dosto, agar aapne purane React projects dekhe honge, toh aapne Class Components aur unke complex lifecycle methods ka naam zaroor suna hoga. Jab hum bade projects banate hain, toh code itna messy ho jata hai ki samajh nahi aata logic kahan likhein. Iska solution aaye Hooks, jinhone React ki duniya badal di hai. Aaj hum isi baare mein baat karenge.

React Hooks Kya Hain?

React Hooks, React 16.8 version mein introduce kiye gaye the. Hooks ka matlab hai "hook in" karna—yaani aap apne functional component ke andar React ke internals ko hook kar rahe hain. Pehle, agar aapko state ya lifecycle methods chahiye hote the, toh aapko Class Components likhne padte the, jo bade aur confusing hote the.

Hooks ke aane ke baad, ab aap bina React components ki class banaye sab kuch kar sakte hain. Aapne dekha hoga ki Hooks hamesha 'use' word se shuru hote hain, jaise useState, useEffect, aur useContext.

React Hooks Kyun Zaroori Hain?

Hooks sirf ek naya feature nahi, balki ek better design pattern hai. Iske kuch main kaaran hain:

• Code Reusability: Aap custom hooks bana sakte hain aur logic ko components ke beech share kar sakte hain.
• Simplicity: Class components mein this keyword ka chakkar hota hai, jo aksar junior developers ko pareshan karta hai. Hooks mein this ka koi jhanjhat nahi hai.
• Bundle Size: Class components ke mukable functional components ke sath code optimize karna aur bundle size chhota rakhna aasan hai.

useState Hook Kaise Kaam Karta Hai?

useState sabse zyada use hone wala hook hai. Ye aapko component mein state manage karne ki suvidha deta hai. Jab state change hoti hai, React automatically UI ko re-render kar deta hai.

Chaliye ek simple example dekhte hain:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Aapne {count} baar click kiya</p>
      <button onClick={() => setCount(count + 1)}>
        Click Karein
      </button>
    </div>
  );
}

useEffect Hook Kya Hai aur Iska Use Kab Karein?

useEffect ka istemal side effects handle karne ke liye hota hai, jaise API call karna, DOM manually update karna, ya subscriptions setup karna. Ye Class Components ke componentDidMount, componentDidUpdate, aur componentWillUnmount ka combo hai.

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

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setData(json));
  }, []); // Empty array ka matlab hai ye sirf ek baar chalega

  return (
    <ul>
      {data.slice(0, 5).map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

Hooks vs Class Components: Comparison Table

Common Mistakes aur Debugging

Jab aap hooks use karte hain, toh kuch baaton ka dhyan rakhna chahiye:

1. Hooks ko hamesha Top Level par likhein: Loops, conditions, ya nested functions ke andar hooks call na karein.
2. Sirf React functions mein call karein: Hooks ko regular JavaScript functions se call na karein.
3. Dependency Array: useEffect mein agar dependency array dena bhool gaye, toh infinite loop mein fas sakte hain, jisse aapko error face karna pad sakta hai.

Best Practices

• Custom hooks banayein agar aap same logic multiple components mein use kar rahe hain.
• Hooks ke naam hamesha use se shuru karein (e.g., useAuth, useFetch).
• React ki Official Documentation ko hamesha follow karein kyunki wahan latest hooks ke baare mein sabse sahi jankari milti hai.

Toh dosto, humne aaj seekha ki hooks kyun itne powerful hain aur kaise ye hamara kaam aasan karte hain. Agar aap MERN Stack ya full-stack development mein deep jana chahte hain, toh hooks par pakad banana bahut zaroori hai.