React Hooks Explained in Simple Way

১. useState

• কী: Component-এর state তৈরি ও update করতে ব্যবহার হয়।

• কখন: যখন তোমাকে component-এর ভিতরে data ধরে রাখতে হবে।

• উদাহরণ:

import React, { useState } from 'react';

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

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

• count = state variable

• setCount = state update function

---

২. useEffect

• কী: Side-effects পরিচালনা করে। যেমন API call, DOM update, timer।

• কখন: component mount, update, unmount হওয়ার সময়।

• উদাহরণ:

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // cleanup on unmount
  }, []); // [] মানে mount হলে একবার চলবে

  return <p>Seconds: {seconds}</p>;
}

---

৩. useContext

• কী: React Context ব্যবহার করতে সাহায্য করে।

• কখন: যদি অনেক component-এ একই data ব্যবহার করতে হয়।

• উদাহরণ:

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

const ThemeContext = createContext();

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme.background, color: theme.color }}>Click me</button>;
}

function App() {
  const theme = { background: 'black', color: 'white' };
  return (
    <ThemeContext.Provider value={theme}>
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

---

৪. useRef

• কী: DOM element বা variable-এর reference রাখতে ব্যবহার হয়।

• কখন: DOM access করতে বা mutable value রাখতে।

• উদাহরণ:

import React, { useRef } from 'react';

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

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

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

---

৫. useReducer

• কী: জটিল state update করার জন্য, useState-এর বিকল্প।

• কখন: যখন state logic অনেক বড় বা nested হয়।

• উদাহরণ:

import React, { useReducer } from 'react';

function reducer(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(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

---

৬. useMemo

• কী: Expensive calculation কে cache করতে সাহায্য করে, শুধু dependency change হলে recalculation হয়।

• উদাহরণ:

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

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

  const expensiveValue = useMemo(() => {
    console.log('Calculating...');
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

---

৭. useCallback

• কী: Function কে memoize করে, unnecessary re-render কমাতে সাহায্য করে।

• উদাহরণ:

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

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

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

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

---

৮. useLayoutEffect

• কী: useEffect-এর মতো কিন্তু DOM update হওয়ার আগে চলে।

• কখন: যখন DOM মাপ/পজিশন পাওয়ার পর দ্রুত কাজ করতে হবে।

---

৯. useImperativeHandle

• কী: Parent component কে child-এর method expose করতে ব্যবহার হয়।

---

💡 সংক্ষেপে:

• useState → state

• useEffect → lifecycle / side-effect

• useContext → context data

• useRef → DOM বা mutable value

• useReducer → জটিল state

• useMemo → expensive calculation cache

• useCallback → function cache