React Hooks Full Guide (বাংলা)

React Hooks হলো React এর একটি শক্তিশালী ফিচার যা functional component-এর ভিতরে state, lifecycle এবং অন্যান্য React ফিচার ব্যবহার করতে সাহায্য করে। Hooks React-এ যুক্ত হয় 16.8 ভার্সনে এবং এর মাধ্যমে class component-এর প্রয়োজনীয়তা অনেকাংশে কমে যায়।

📌 Hooks কী?

Hooks হলো এমন কিছু বিশেষ function, যেগুলোর মাধ্যমে state, lifecycle method, context, ref, memoization ইত্যাদি কাজ সহজে functional component-এ করা যায়।

Hooks = Functional Component + Power of Class Component

📌 কেন Hooks দরকার?

• Class component ব্যবহার না করেও state এবং lifecycle ব্যবহার করা যায়।
• কোড ছোট, পরিষ্কার এবং readable হয়।
• Reusable logic সহজে তৈরি করা যায় (Custom Hooks)।
• Performance বাড়ায় কারণ কম boilerplate কোড লাগে।

🔰 React Hooks-এর প্রধান ধরন

• Basic Hooks: useState, useEffect, useContext
• Additional Hooks: useReducer, useCallback, useMemo, useRef
• Custom Hooks: নিজের মতো করে Hook তৈরি করা

------------------------------

⭐ Basic Hooks Explained ⭐

------------------------------

1️⃣ useState Hook

useState হলো React-এর সবচেয়ে বেশি ব্যবহৃত Hook। এটি component-এর ভিতরে state তৈরি করতে ব্যবহার করা হয়।

👉 Syntax:

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

👉 Example:

import { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

2️⃣ useEffect Hook

useEffect হলো React-এর lifecycle hook—যেটি component render হওয়ার পরে side-effects চালায়।

✔ Side Effects কী?

• API Calling
• DOM Manipulation
• Event listener add/remove
• Timer set করা

👉 Syntax:

useEffect(() => {
  // code to run
}, [dependencies]);

👉 Example (API Fetch):

import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return <div>Users Loaded: {users.length}</div>;
}

3️⃣ useContext Hook

Props drilling সমস্যা সমাধানের জন্য context ব্যবহার করা হয়। আর useContext দিয়ে সেই context এর data সহজে পাওয়া যায়।

👉 Example:

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value="Rahim">
      <Child />
    </UserContext.Provider>
  );
}

function Child() {
  const user = useContext(UserContext);
  return <h2>User: {user}</h2>;
}

------------------------------

⭐ Additional Hooks Explained ⭐

------------------------------

4️⃣ useRef Hook

useRef খুব গুরুত্বপূর্ণ। এর মাধ্যমে:

• DOM element access করা যায়
• State value hold রাখা যায় re-render ছাড়াই
• Timer বা previous value store করা যায়

👉 Example (DOM focus):

import { useRef } from "react";

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

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

5️⃣ useMemo Hook

Expensive calculation optimize করতে useMemo ব্যবহার করা হয়।

👉 Example:

const expensiveResult = useMemo(() => {
   return heavyCalculation(count);
}, [count]);

6️⃣ useCallback Hook

Child component unnecessary re-render থামাতে useCallback ব্যবহার করা হয়।

👉 Syntax:

const memoizedFunction = useCallback(() => {
   // function code
}, [dependency]);

7️⃣ useReducer Hook

Complex state logic পরিচালনার জন্য useReducer ব্যবহার করা হয়।

👉 Example:

const reducer = (state, action) => {
  switch(action.type) {
    case "inc": return state + 1;
    case "dec": return state - 1;
    default: return state;
  }
};

const [count, dispatch] = useReducer(reducer, 0);

------------------------------

⭐ Custom Hooks ⭐

------------------------------

Custom Hook কী?

একই logic বিভিন্ন component-এ ব্যবহার করতে হলে custom hook তৈরি করা হয়।

👉 Example: useFetch Custom Hook

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

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => setData(data));
  }, [url]);

  return data;
}

ব্যবহার:

const users = useFetch("https://jsonplaceholder.typicode.com/users");

🎉 Final Summary

• Hooks React-এর সবচেয়ে শক্তিশালী অংশ
• Functional component-কে আরও সুবিধাজনক করে তোলে
• Reusable code তৈরি করা যায়
• Performance optimization সহজ হয়

React শিখতে চাইলে Hooks অবশ্যই ভালোভাবে বুঝতে হবে।