React Hooks — এগুলো কি, প্রধান হুক এবং ব্যবহারের নিয়ম

React Hooks কি?

React Hooks হল React এ নির্মিত ফাংশনের একটি সেট যা আপনাকে ক্লাস না তৈরি করে ফ্রেমওয়ার্কের আন্তরিক প্রক্রিয়ায় “সংযুক্ত হতে” দেয়। React 16.8 এর আগে, ফাংক্শনাল কম্পোনেন্ট শুদুমাত্র props আক্ষেপ করতে এবং JSX ফিরিয়ে দিতে পারত — যেকোনো জটিল যুক্তির জন্য একটি ক্লাস কম্পোনেন্ট প্রয়োজন হত।

ক্লাস কম্পোনেন্টের সমস্যা হল সংপর্কিত যুক্তি বিচ্ছিন্ন। একটি এন্টিটির সঙ্গে সম্পর্কিত কোড (যেমন, একটি WebSocket সাবস্ক্রিপশন) জোর করে componentDidMount, componentDidUpdate এবং componentWillUnmount এর মধ্যে বিভক্ত ছিল। হুক এটি সমাধান করে: সব যুক্তি একটি useEffect এ গ্রুপবদ্ধ হয়।

দ্বিতীয় সমস্যা হল যুক্তি পুনর্ব্যবহার। ক্লাস কম্পোনেন্টের মধ্যে অবস্থা যুক্তি পুনর্ব্যবহার করতে, আপনাকে HOC (উচ্চ-স্তরের কম্পোনেন্ট) বা render props প্রয়োগ করতে হত — উভয় প্যাটার্ন কম্পোনেন্ট ট্রিতে অতিরিক্ত নেস্টিং তৈরি করত। কাস্টম হুক নেস্টিং ছাড়াই এটি সমাধান করে।

useState — অবস্থা পরিচালনা

useState হল সবচেয়ে মৌলিক হুক। এটি একটি প্রারম্ভিক মান নেয় এবং একটি টিউপল ফিরিয়ে দেয়: বর্তমান মান এবং এটি আপডেট করার একটি ফাংশন। ক্লাসে this.setState এর বিপরীত, useState অবজেক্ট মার্জ করে না — নতুন অবস্থা একটি নির্দিষ্ট useState কলের জন্য পূর্ববর্তী অবস্থাকে সম্পূর্ণ প্রতিস্থাপন করে।

import React, { useState } from 'react';

function Form() {
  const [text, setText] = useState('');
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit() {
    setSubmitting(true);
    await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify({ text })
    });
    setSubmitting(false);
  }

  return (
    <div>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <button onClick={handleSubmit}
        disabled={submitting}>
        {submitting ? 'Saving...' : 'Submit'}
      </button>
    </div>
  );
}

ফাংক্শনাল setState ফর্ম

useState সেটার একটি ফাংশন আক্ষেপ করতে পারে যা পূর্ববর্তী মান প্রাপ্ত করে এবং একটি নতুন মান ফিরিয়ে দেয়। ফাংক্শনাল ফর্ম আবশ্যক যখন নতুন অবস্থা পূর্ববর্তী অবস্থা থেকে গণনা করা হয় এবং ব্যচ করা setState কল সম্ভব — প্রতিটি কল বর্তমান পূর্ববর্তী মান পাবে।

useEffect — সাইড ইফেক্ট এবং জীবনচক্র

useEffect ফাংক্শনাল কম্পোনেন্টে সাইড ইফেক্ট করার জন্য একটি হুক। এটি দুটি আর্গুমেন্ট নেয়: একটি ইফেক্ট ফাংশন এবং একটি ডিপেন্ডেন্সি অ্যারে। React প্রতিটি রেণ্ডারের পর ইফেক্ট চালায়, কিন্তু যখন ডিপেন্ডেন্সি নির্দিষ্ট করা হয় — শুদুমাত্র যখন তাদের মধ্যে কোনোটি পরিবর্তন হয়।

একটি খালি ডিপেন্ডেন্সি অ্যারে [] মানে ইফেক্টটি প্রথম রেণ্ডারের পর একবার চালে (componentDidMount এর অনুরূপ)। ইফেক্ট থেকে একটি ফাংশন ফিরিয়ে দেওয়া একটি পরিষ্কার যা আনমৌন্টে চালে (componentWillUnmount এর অনুরূপ) এবং ইফেক্ট পুনরায় চালানোর আগে।

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

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = new WebSocket(`wss://chat/${roomId}`);

    socket.onmessage = (event) => {
      setMessages(prev => [...prev, JSON.parse(event.data)]);
    };

    // পরিষ্কার - সকেট বন্ধ করুন
    return () => socket.close();
  }, [roomId]);

  return <ul>
    {messages.map((msg, i) =>
      <li key={i}>{msg.text}</li>
    )}
  </ul>;
}

useEffect এর ডিপেন্ডেন্সি ইফেক্ট এবং বাইরের দুনিয়ার মধ্যে একমাত্র সংযোগ। যদি ইফেক্ট props বা অবস্থা থেকে একটি ভেরিয়েবল ব্যবহার করে, তাকে ডিপেন্ডেন্সি অ্যারে থাকতে হবে। এই নিয়ম অগ্রাহ করা পুরনো closures সহ বগের উৎস।

useContext — কন্টেক্সট অ্যাক্সেস

useContext কন্টেক্সট মান পড়ার জন্য একটি হুক। এটি React.createContext দ্বারা তৈরি একটি কন্টেক্সট অবজেক্ট নেয় এবং বর্তমান মান ফিরিয়ে দেয়। যদি কন্টেক্সট পরিবর্তিত হয়, তবে কম্পোনেন্ট স্বচালিতভাবে নতুন মান দিয়ে পুনরায় রেণ্ডার হয়।

useContext এর আগে, ফাংক্শনাল কম্পোনেন্টে কন্টেক্সট অ্যাক্সেস করতে Context.Consumer এ মুড়িয়ে দেওয়া প্রয়োজন ছিল, যা নেস্টিং তৈরি করত। useContext সম্পূর্ণ ভাবে Consumer দূর করে — শুদুমাত্র ফাংক্শনাল কম্পোনেন্টে যেকোনো জায়গায় হুকটি ডাকুন।

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

const ThemeContext = createContext('হালকা');

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return <button
    className={`btn btn-${theme}`}
  >
    {theme === 'dark' ? 'moon' : '☀️'}
  </button>;
}

useContext Redux বা বৈশ্বিক অবস্থার বিকল্প নয়। React কম পরিবর্তিত মান — থিম, লোকেল, প্রমাণীকরণ স্টেটাসের জন্য কন্টেক্সট ব্যবহার করার পরামর্শ দেয়। বারবার আপডেট ডেটার জন্য, প্রতিটি পুনরায় রেণ্ডার সব কন্টেক্সট গ্রাহকের পুনরায় গণনা করবে, যা কার্যদক্ষতা হ্রাস করতে পারে।

useReducer — জটিল অবস্থা যুক্তি

useReducer জটিল আপডেট যুক্তি সহ অবস্থার জন্য useState এর একটি বিকল্প। এটি একটি রিডিউসার ফাংশন এবং প্রারম্ভিক অবস্থা নেয়, বর্তমান অবস্থা এবং একটি dispatch ফাংশন ফিরিয়ে দেয়। রিডিউসার বর্তমান অবস্থা এবং কার্য প্রাপ্ত করে, একটি নতুন অবস্থা ফিরিয়ে দেয় — সাইড ইফেক্ট ছাড়া একটি বিশুদ্ধ ফাংশন।

useReducer বিশেষ করে উপযোগী যখন একাধিক কার্য (set, reset, increment, addItem) একটি অবস্থা পরিচালনা করে। বিভিন্ন সেটার সহ একাধিক useState কলের পরিবর্তে — স্পষ্ট কার্য ধরনের সাথে একটি রিডিউসার। এটি যুক্তিকে পূর্বানুমানযোগ্য এবং সহজে পরীক্ষণযোগ্য করে।

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'setStep':
      return { ...state, step: action.step };
    case 'reset':
      return { count: 0, step: 1 };
    default:
      throw new Error('Unknown action: ' + action.type);
  }
}

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

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

useRef, useMemo, useCallback — অপ্টিমাইজেশন

useRef একটি পরিবর্তনীয় অবজেক্ট তৈরি করে যা রেণ্ডারের মধ্যে টিকে থাকে। current পরিবর্তন করলে পুনরায় রেণ্ডার হয় না। প্রধান ব্যবহার হল DOM উপাদান অ্যাক্সেস এবং পরিবর্তনীয় মান (টাইমার, পূর্ববর্তী মান, লাইব্রেরী ইনস্টেন্স) সংরক্ষণ।

useMemo একটি ফাংশনের ফলাফল মেমাইজ করে। এটি শুদুমাত্র তখন মান পুনরায় গণনা করে যখন একটি ডিপেন্ডেন্সি পরিবর্তিত হয়। ব্যয়বহুল গণনার জন্য এটি ব্যবহার করুন — বড় অ্যারে ফিল্টারিং, সর্টিং, ডেটা ফরম্যাটিং। useCallback ফাংশন মেমাইজিংয়ের জন্য useMemo এর একটি বিশেষ মামলা।

import React, { useRef, useMemo, useCallback } from 'react';

function SearchPage({ items, query, onItemSelect }) {
  const inputRef = useRef(null);

  // মৌন্টে অটোফোকাস
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  // ফিল্টার করা ফলাফল মেমাইজ করুন
  const filtered = useMemo(() => {
    return items.filter(item =>
      item.name.toLowerCase()
        .includes(query.toLowerCase())
    );
  }, [items, query]);

  // কলব্যাক মেমাইজ করুন
  const handleSelect = useCallback((id) => {
    onItemSelect(id);
  }, [onItemSelect]);

  return (
    <div>
      <input ref={inputRef}
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <ul>
        {filtered.map(item =>
          <li key={item.id}>
            <button
              onClick={() => handleSelect(item.id)}>
              {item.name}
            </button>
          </li>
        )}
      </ul>
    </div>
  );
}

একটি গুরুত্বপূর্ণ নিয়ম: useRef, useMemo এবং useCallback হল অপ্টিমাইজেশন টুল, বাধ্যতামূলক গঠন নয়। সব কিছু useMemo এ মুড়িয়ে দেবেন না — প্রথমে কার্যদক্ষতা মাপুন। অকালে অপ্টিমাইজেশন কোড জটিল করে। React কম্পোনেন্ট দ্রুত রেণ্ডার করে; useMemo কেবল তখনই প্রয়োজন যখন গণনা সত্যিই ব্যয়বহুল (O(n²) এবং উপরে।

হুকের নিয়ম এবং সাধারণ ভুল

React হুকের জন্য দুটি কড়া নিয়ম চালু করেছে। প্রথম: শুদুমাত্র উপরের স্তরে হুক ডাকুন — শর্ত, লূপ বা নেস্টেড ফাংশনের মধ্যে নয়। দ্বিতীয়: শুদুমাত্র React ফাংক্শনাল কম্পোনেন্ট বা কাস্টম হুক থেকে হুক ডাকুন। ESLint প্লাগইন eslint-plugin-react-hooks স্বচালিতভাবে উভয় নিয়ম পরীক্ষা করে।

সবচেয়ে সাধারণ ভুল হল হুক কলের ক্রম লঙ্ঘন। React রেণ্ডারের মধ্যে হুক কলের ক্রমের উপর নির্ভর করে। যদি একটি হুক একটি শর্তের মধ্যে থাকে এবং একটি রেণ্ডারে চালা না, তবে পরবর্তী সকল হুক সরে যায়, যা বগ সৃষ্টি করে।

দ্বিতীয় সাধারণ ভুল হল useEffect এ stale closure। যদি ইফেক্ট একটি ভেরিয়েবল ব্যবহার করে যা ডিপেন্ডেন্সিতে নির্দিষ্ট নয়, তবে ইফেক্টটি ক্লোজার তৈরির সময় এর মান “ক্যাপচার” করে। সমাধান হল সব ব্যবহৃত ভেরিয়েবল সবসময় ডিপেন্ডেন্সি অ্যারে অন্তর্ভুক্ত করা। যদি অনেক ডিপেন্ডেন্সি থাকে, তবে ইফেক্টটিকে একাধিক ভাগে বিভক্ত করার কথা চিন্তা করুন।