React 16.8 এর পর, React Hooks নতুন একটি বৈশিষ্ট্য হিসেবে চালু করা হয়, যা ক্লাস কম্পোনেন্টের বিকল্প হিসেবে ফাংশনাল কম্পোনেন্টে স্টেট এবং লাইফসাইকেল ফিচার ব্যবহার করার সুবিধা দেয়। এর মাধ্যমে React ডেভেলপাররা ক্লাস কম্পোনেন্টের পরিবর্তে ফাংশনাল কম্পোনেন্টে উন্নত ফিচারসমূহ যেমন স্টেট ম্যানেজমেন্ট, এফেক্ট হ্যান্ডলিং, কাস্টম হুক ইত্যাদি ব্যবহার করতে পারেন।
Hooks এর সাহায্যে React কম্পোনেন্টের কোড আরও সংক্ষিপ্ত, পরিষ্কার এবং মেইনটেনেবল হয়। এটি JavaScript ফাংশন হিসেবে কাজ করে এবং ফাংশনাল কম্পোনেন্টে লাইফসাইকেল মেথডস এবং স্টেট ম্যানেজমেন্টের ফিচার এনাবল করে।
React Hooks এর সুবিধা
- সারলতা ও সংক্ষিপ্ততা: ফাংশনাল কম্পোনেন্টের কোড ছোট এবং পরিষ্কার হয়, যেখানে আপনি শুধুমাত্র দরকারি লজিকই রাখেন।
- স্টেট ব্যবস্থাপনা: ফাংশনাল কম্পোনেন্টে useState হুক ব্যবহার করে আপনি স্টেট ম্যানেজমেন্ট করতে পারেন, যা ক্লাস কম্পোনেন্টের
this.stateএবংthis.setStateএর মতো নয়। - লাইফসাইকেল মেথড সহজ করা: useEffect হুকের মাধ্যমে আপনি কম্পোনেন্টের মাউন্ট, আপডেট এবং আনমাউন্ট সবার জন্য একই কোড ব্যবহার করতে পারেন, যা ক্লাস কম্পোনেন্টে বিভিন্ন লাইফসাইকেল মেথডে আলাদা আলাদা কোডিংয়ের সুবিধা দেয়।
- কাস্টম হুক তৈরি: React Hooks কাস্টম হুক তৈরি করার সুযোগ দেয়, যাতে আপনি পুনঃব্যবহারযোগ্য লজিক তৈরি করতে পারেন এবং তাকে সহজভাবে বিভিন্ন কম্পোনেন্টে ব্যবহার করতে পারেন।
React Hooks এর প্রকার
১. useState
useState হুকটি ফাংশনাল কম্পোনেন্টে স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। এটি একটি অ্যারে রিটার্ন করে, যেখানে প্রথম উপাদানটি স্টেট মান এবং দ্বিতীয় উপাদানটি স্টেট আপডেট করার জন্য একটি ফাংশন হয়।
উদাহরণ:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
এখানে, useState(0) স্টেটের প্রাথমিক মান ০ সেট করেছে, এবং setCount স্টেট আপডেট করার জন্য ব্যবহৃত হচ্ছে।
২. useEffect
useEffect হুকটি কম্পোনেন্টের মাউন্ট, আপডেট এবং আনমাউন্টের সময় কিছু কার্যক্রম চালানোর জন্য ব্যবহৃত হয়। এটি React এর ক্লাস কম্পোনেন্টে componentDidMount, componentDidUpdate, এবং componentWillUnmount এর বিকল্প।
উদাহরণ:
import React, { useState, useEffect } from 'react';
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime(prevTime => prevTime + 1);
}, 1000);
return () => clearInterval(interval); // Clean up on component unmount
}, []);
return <div>Time: {time} seconds</div>;
}
এখানে, useEffect হুকটি প্রতি সেকেন্ডে টাইম আপডেট করতে ব্যবহৃত হয়েছে। এর মধ্যে ক্লিনআপ ফাংশনও আছে, যা কম্পোনেন্ট আনমাউন্ট হওয়ার সময় টাইমার বন্ধ করে দেয়।
৩. useContext
useContext হুকটি React-এর কনটেক্সট API এর সাথে কাজ করে, যা গ্লোবাল স্টেট শেয়ার করার জন্য ব্যবহৃত হয়। এটি ফাংশনাল কম্পোনেন্টে কনটেক্সট ভ্যালু এক্সেস করতে সাহায্য করে।
উদাহরণ:
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedComponent() {
const theme = useContext(ThemeContext);
return <div>The current theme is {theme}</div>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedComponent />
</ThemeContext.Provider>
);
}
এখানে, useContext হুকটি ThemeContext থেকে মান গ্রহণ করে এবং ThemedComponent এর মধ্যে রেন্ডার করে।
৪. useRef
useRef হুকটি DOM উপাদান বা মান সংরক্ষণ করতে ব্যবহৃত হয় যা রেন্ডার সাইকেল এফেক্ট করেনা। এটি সাধারণত DOM এ প্রবেশ করতে, এবং ভার্চুয়াল DOM রেন্ডার না করেই মান পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
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 the input</button>
</div>
);
}
এখানে, useRef হুকটি একটি DOM রেফারেন্স তৈরি করছে, যার মাধ্যমে input ফিল্ডে ফোকাস করা হচ্ছে।
৫. useReducer
useReducer হুকটি একটি বিকল্প হিসেবে ব্যবহার করা হয় যখন আপনি কমপ্লেক্স স্টেট লজিক পরিচালনা করতে চান। এটি স্টেট পরিবর্তন এবং অ্যাকশন ডিসপ্যাচিংয়ের জন্য ব্যবহৃত হয়, এবং Redux এর মত কাজ করে।
উদাহরণ:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
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, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
এখানে, useReducer হুকটি একটি reducer ফাংশন ব্যবহার করে স্টেট পরিচালনা করছে।
React Hooks এর গুরুত্ব
- ফাংশনাল কম্পোনেন্টে স্টেট এবং লাইফসাইকেল মেথড ব্যবহারের সুবিধা।
- কোড কমপ্লেক্সিটি কমানো এবং কোড রিইউসেবিলিটি বৃদ্ধি করা।
- কাস্টম হুক ব্যবহার করে পুনঃব্যবহারযোগ্য লজিক তৈরি করা।
- স্টেট এবং লজিক আলাদা করে রাখা, যা অ্যাপ্লিকেশনকে মেইনটেনেবল এবং স্কেলেবল করে।
React Hooks, বিশেষ করে useState, useEffect, এবং অন্যান্য হুকগুলি, React ডেভেলপারদের জন্য কাজের গতি দ্রুত এবং সহজ করে তোলে।
Hooks কী?
React 16.8-এ Hooks পরিচয় করানো হয়, যা ফাংশনাল কম্পোনেন্টগুলোর মধ্যে স্টেট এবং লাইফ সাইকেল ফিচার ব্যবহারের সুযোগ দেয়। Hooks আপনাকে ক্লাস কম্পোনেন্টের মতো স্টেট এবং অন্যান্য React ফিচার ব্যবহার করতে সক্ষম করে, তবে ফাংশনাল কম্পোনেন্টের সুবিধা নিয়ে। Hooks হল একটি নতুন পদ্ধতি React অ্যাপ্লিকেশন তৈরির জন্য, যা কোডের পাঠযোগ্যতা, পুনঃব্যবহারযোগ্যতা এবং কার্যকারিতা বাড়ায়।
React-এ প্রধান Hooks:
- useState: ফাংশনাল কম্পোনেন্টে স্টেট ব্যবহার করতে।
- useEffect: ফাংশনাল কম্পোনেন্টে লাইফ সাইকেল মেথড এবং সাইড ইফেক্ট পরিচালনা করতে।
- useContext: React Context API ব্যবহার করতে।
- useReducer: স্টেট পরিচালনা করার জন্য আরও উন্নত কৌশল।
- useRef: DOM এ এক্সেস পাওয়ার জন্য এবং স্টেট থেকে আলাদা কোনো মান সংরক্ষণ করতে।
- useMemo এবং useCallback: পারফরম্যান্স অপটিমাইজেশন জন্য ব্যবহৃত হয়।
Hooks কেন প্রয়োজন?
React এর পূর্ববর্তী সংস্করণে, শুধুমাত্র ক্লাস কম্পোনেন্ট-এ স্টেট, লাইফ সাইকেল মেথড এবং অন্যান্য React ফিচার ব্যবহার করা যেত। তবে, ফাংশনাল কম্পোনেন্টের মাধ্যমে কোড লেখা সহজ এবং কমপ্যাক্ট হতে পারে, তবে ফাংশনাল কম্পোনেন্টে স্টেট এবং লাইফ সাইকেল মেথড ব্যবহার করা সম্ভব ছিল না। এর ফলে, ক্লাস কম্পোনেন্টে এই ফিচারগুলো ব্যবহার করতে হলে কোডটি অনেক বড় এবং জটিল হয়ে যেত। Hooks এর আগমনে, ফাংশনাল কম্পোনেন্টের মধ্যে স্টেট এবং লাইফ সাইকেল ব্যবস্থাপনা করা সম্ভব হয়।
Hooks ব্যবহারের সুবিধাসমূহ:
১. ক্লাস কম্পোনেন্ট থেকে সহজে ফাংশনাল কম্পোনেন্টে স্থানান্তর
Hooks ফাংশনাল কম্পোনেন্টে স্টেট এবং লাইফ সাইকেল মেথড ব্যবহারের সুযোগ প্রদান করে, যার ফলে ডেভেলপাররা কমপ্লেক্স ক্লাস কম্পোনেন্টের পরিবর্তে ফাংশনাল কম্পোনেন্ট ব্যবহার করতে পারেন, যা বেশি সহজ এবং পাঠযোগ্য।
২. কোড পুনঃব্যবহারযোগ্যতা বৃদ্ধি
Hooks আপনাকে স্টেট এবং অন্যান্য React ফিচারকে ভিন্ন ভিন্ন ফাংশনে আলাদা আলাদা ভাবে রাখার সুযোগ দেয়, যা কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করে। Hooks ব্যবহারের ফলে একই ধরনের ফিচারগুলি একত্রে রাখতে এবং প্রয়োজনে একাধিক কম্পোনেন্টে ব্যবহার করতে সহজ হয়।
৩. কোড কমপ্যাক্ট এবং পরিষ্কার
Hooks ব্যবহারের মাধ্যমে ক্লাস কম্পোনেন্টের দীর্ঘ কোডের পরিবর্তে ছোট, পরিষ্কার এবং সহজ ফাংশনাল কম্পোনেন্ট লেখা সম্ভব হয়। এর ফলে কোডের মেইন্টেনেন্স এবং ডেভেলপমেন্ট আরও সহজ হয়ে ওঠে।
৪. স্টেট এবং সাইড ইফেক্ট ম্যানেজমেন্ট
React Hooks-এর মাধ্যমে স্টেট এবং সাইড ইফেক্টগুলো (যেমন, API কল, সাবস্ক্রিপশন, টাইমার, ইত্যাদি) ফাংশনাল কম্পোনেন্টের মধ্যে সহজে পরিচালনা করা যায়। useEffect hook ব্যবহার করে লাইফ সাইকেল মেথড পরিচালনা করা সম্ভব হয়, যেমন componentDidMount, componentDidUpdate, এবং componentWillUnmount।
৫. পারফরম্যান্স অপটিমাইজেশন
Hooks এর মধ্যে useMemo এবং useCallback রয়েছে, যা পারফরম্যান্স অপটিমাইজেশনের জন্য ব্যবহৃত হয়। এই hooks ব্যবহার করে, আপনি মেমোরি ব্যবহার অপটিমাইজ করতে পারেন এবং ফাংশন বা কম্পোনেন্টের পুনরায় রেন্ডারিং কমাতে পারেন।
৬. React ইকোসিস্টেমের সঙ্গে সহজ সংহতি
Hooks React এর অন্যান্য API যেমন Context, Reducer, Ref, ইত্যাদির সঙ্গে সহজভাবে সংযুক্ত হতে পারে। useContext, useReducer এবং useRef Hooks ব্যবহারের মাধ্যমে React অ্যাপ্লিকেশনগুলো আরও শক্তিশালী এবং ফ্লেক্সিবল হয়ে ওঠে।
React-এ প্রধান Hooks
১. useState
useState হল React-এ স্টেট পরিচালনা করার জন্য ব্যবহার করা হয়। এটি একটি ফাংশন যা স্টেটের মান এবং সেটার আপডেট করার ফাংশন প্রদান করে।
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // স্টেট সেট করা
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
এখানে, useState স্টেট count তৈরি করেছে এবং setCount সেটার মান আপডেট করার ফাংশন হিসেবে কাজ করছে।
২. useEffect
useEffect হল React-এ সাইড ইফেক্ট পরিচালনার জন্য ব্যবহৃত একটি hook। এটি ফাংশনাল কম্পোনেন্টে লাইফ সাইকেল মেথডের মতো কাজ করে, যেমন componentDidMount, componentDidUpdate, এবং componentWillUnmount।
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);
return () => clearInterval(interval); // cleanup function
}, []);
return <h1>{seconds} seconds have passed</h1>;
}
এখানে, useEffect টাইমার সেট করে এবং কম্পোনেন্টটি আনমাউন্ট হলে সেটি ক্লিনআপ করে।
৩. useContext
useContext hook React Context API ব্যবহার করে, যাতে আপনি কম্পোনেন্ট ট্রি জুড়ে ডেটা শেয়ার করতে পারেন।
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedComponent() {
const theme = useContext(ThemeContext);
return <div>The current theme is {theme}</div>;
}
এখানে, useContext hook দ্বারা ThemeContext থেকে ডেটা নেয়া হচ্ছে।
সারাংশ
React Hooks React 16.8 এ চালু হওয়ার পর থেকে ফাংশনাল কম্পোনেন্টে স্টেট, লাইফ সাইকেল মেথড এবং অন্যান্য ফিচার ব্যবহারের সুবিধা দিয়েছে। Hooks এর মাধ্যমে কোড লেখার পদ্ধতি আরও সহজ, পরিষ্কার এবং পুনঃব্যবহারযোগ্য হয়েছে, যা React অ্যাপ্লিকেশন তৈরির প্রক্রিয়াকে দ্রুত ও কার্যকরী করে তোলে।
ReactJS-এ Hooks হল এমন ফাংশন যা ক্লাস কম্পোনেন্টের বাইরে থেকে React স্টেট এবং লাইফসাইকেল ফিচার ব্যবহার করতে সাহায্য করে। useState এবং useEffect হল React এর সবচেয়ে জনপ্রিয় এবং গুরুত্বপূর্ণ হুক। এগুলো ব্যবহার করে আপনি ফাংশনাল কম্পোনেন্টে স্টেট এবং সাইড-এফেক্ট ম্যানেজ করতে পারেন।
useState Hook
useState হুক React ফাংশনাল কম্পোনেন্টে স্টেট (state) পরিচালনা করার জন্য ব্যবহৃত হয়। এটি একটি আরেকে ফেরত দেয়: প্রথমটি হল বর্তমান স্টেট ভ্যালু, এবং দ্বিতীয়টি হল সেই স্টেট ভ্যালু আপডেট করার জন্য একটি ফাংশন।
ব্যবহার:
const [state, setState] = useState(initialState);
state: বর্তমান স্টেট ভ্যালু।setState: স্টেট আপডেট করার জন্য ব্যবহৃত ফাংশন।initialState: স্টেটের প্রথম মান, এটি প্রাথমিক অবস্থায় দেওয়ার জন্য ব্যবহৃত হয়।
উদাহরণ:
import React, { useState } from 'react';
const Counter = () => {
// count হলো স্টেট, এবং setCount হলো ফাংশন যা স্টেট আপডেট করবে।
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
</div>
);
};
export default Counter;
এখানে count স্টেট হিসেবে শুরু হয়েছে 0 দিয়ে, এবং setCount ফাংশন ব্যবহার করে এটি আপডেট করা হচ্ছে। Increase বাটনে ক্লিক করলে count বাড়বে এবং Decrease বাটনে ক্লিক করলে count কমবে।
useEffect Hook
useEffect হুক React ফাংশনাল কম্পোনেন্টে সাইড-এফেক্ট পরিচালনার জন্য ব্যবহৃত হয়। সাইড-এফেক্ট এমন কিছু যা আপনার কম্পোনেন্টের রেন্ডার প্রক্রিয়ার বাইরে ঘটে, যেমন ডেটা ফেচিং, সাবস্ক্রিপশন, টাইমার সেট করা ইত্যাদি।
useEffect কম্পোনেন্টের রেন্ডার হওয়ার পর একবার বা একাধিক বার চলতে পারে। এটি মূলত লাইফসাইকেল মেথড (যেমন componentDidMount, componentDidUpdate, componentWillUnmount) এর মতো কাজ করে, কিন্তু ফাংশনাল কম্পোনেন্টে।
ব্যবহার:
useEffect(() => {
// সাইড-এফেক্ট কোড এখানে থাকবে।
// রিটার্ন করার মাধ্যমে ক্লিন-আপ ফাংশন (optional) যোগ করা যায়।
return () => {
// ক্লিন-আপ কোড এখানে থাকবে।
};
}, [dependencies]);
- প্রথম আর্গুমেন্ট: সাইড-এফেক্ট কোড (ফাংশন) যা কম্পোনেন্টের রেন্ডার হওয়ার পর চলবে।
- দ্বিতীয় আর্গুমেন্ট (optional): একটি অ্যারে যা ডিপেনডেন্সি হিসেবে কাজ করে। এটি নির্দিষ্ট করে দেয়, কোন ভ্যারিয়েবলের পরিবর্তন হলে সাইড-এফেক্ট কোডটি পুনরায় চালানো হবে।
উদাহরণ:
import React, { useState, useEffect } from 'react';
const Timer = () => {
const [seconds, setSeconds] = useState(0);
// useEffect দিয়ে টাইমার তৈরি করা
useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);
// ক্লিন-আপ ফাংশন
return () => clearInterval(interval);
}, []); // [] মানে কম্পোনেন্ট প্রথমবার রেন্ডার হওয়ার পর একবারই চলবে
return (
<div>
<p>Time: {seconds} seconds</p>
</div>
);
};
export default Timer;
এখানে, useEffect হুক ব্যবহার করে একটি টাইমার তৈরি করা হয়েছে যা প্রতি সেকেন্ডে seconds স্টেট বাড়িয়ে দেয়। কম্পোনেন্টটি আনমাউন্ট হলে clearInterval ফাংশনটি ব্যবহার করে টাইমার বন্ধ করা হয়।
useEffect এর ডিপেনডেন্সি
useEffect হুকের দ্বিতীয় আর্গুমেন্ট একটি ডিপেনডেন্সি অ্যারে হতে পারে। এটি React কে বলে দেয়, কোন ভ্যারিয়েবলগুলোর পরিবর্তন হলে সাইড-এফেক্ট কোডটি পুনরায় রান করবে।
উদাহরণ ১: নির্দিষ্ট স্টেট বা প্রপ্সের উপর নির্ভরশীল
useEffect(() => {
// সাইড-এফেক্ট কোড
}, [someState]); // only runs when someState changes
উদাহরণ ২: ডিফল্টভাবে একবারই রান করা
useEffect(() => {
// সাইড-এফেক্ট কোড
}, []); // runs only once, when the component mounts
উদাহরণ ৩: সব সময় রান করা (কম্পোনেন্টের প্রতি রেন্ডারে)
useEffect(() => {
// সাইড-এফেক্ট কোড
}); // runs after every render
useEffect এবং useState একসাথে ব্যবহার
useState এবং useEffect একসাথে ব্যবহার করে আপনি বিভিন্ন ধরনের ইন্টারেকশন তৈরি করতে পারেন। যেমন, ফরম ফিল্ডের মান পরিবর্তন হলে API কল করা অথবা কোনো ভ্যালু আপডেট হলে UI রেন্ডার করা।
import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
console.error('Error fetching data:', error);
setLoading(false);
});
}, []); // runs once on component mount
if (loading) return <p>Loading...</p>;
return <pre>{JSON.stringify(data, null, 2)}</pre>;
};
export default DataFetcher;
এখানে useEffect হুক ব্যবহার করে data ফেচ করা হচ্ছে এবং useState হুক ব্যবহার করে লোডিং স্টেট ট্র্যাক করা হচ্ছে। একবার ডেটা আসলে, loading স্টেট আপডেট হয়ে UI রেন্ডার হবে।
সারাংশ
useStateহুক React ফাংশনাল কম্পোনেন্টে স্টেট ম্যানেজমেন্ট করতে ব্যবহৃত হয়।useEffectহুক সাইড-এফেক্ট (যেমন ডেটা ফেচিং, সাবস্ক্রিপশন) পরিচালনার জন্য ব্যবহৃত হয়।useEffectহুকের দ্বিতীয় আর্গুমেন্ট (ডিপেনডেন্সি অ্যারে) React কে বলে দেয় কখন সাইড-এফেক্ট পুনরায় চালানো হবে।
React-এ Custom Hooks হল এমন একটি কাস্টম ফাংশন যা React এর বিল্ট-ইন হুকগুলোর (যেমন useState, useEffect) মতোই কাজ করে, তবে এটি আপনার নিজস্ব কাস্টম লজিক বা স্টেট ম্যানেজমেন্টের জন্য তৈরি করা হয়। Custom Hooks দিয়ে আপনি কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করতে পারেন এবং অ্যাপ্লিকেশনের বিভিন্ন অংশে একই লজিক বা ফিচার ব্যবহার করতে পারেন।
Custom Hook কী?
React এর Hooks, যেমন useState, useEffect, React কম্পোনেন্টের মধ্যে স্টেট বা লাইফসাইকেল ম্যানেজমেন্টে সহায়তা করে। Custom Hook মূলত React এর হুকগুলোর মাধ্যমে নিজের প্রয়োজন অনুযায়ী নতুন ফিচার তৈরি করার সুযোগ দেয়, যা আপনি আপনার প্রজেক্টের বিভিন্ন জায়গায় পুনঃব্যবহার করতে পারেন।
Custom Hooks সাধারণত use প্রিফিক্স দিয়ে শুরু হয়, যা React এর হুকের কনভেনশন অনুসরণ করে।
Custom Hook তৈরি করার প্রক্রিয়া
Custom Hook তৈরি করার জন্য আপনি সাধারণত যে ধাপগুলো অনুসরণ করবেন তা হল:
- React Hook এর ব্যবহার: আপনি যেই React হুকটি চান, যেমন
useState,useEffect,useContext, ইত্যাদি, সেটি আপনার Custom Hook এর মধ্যে ব্যবহার করবেন। - লজিককে আলাদা করা: আপনি যেটি পুনঃব্যবহারযোগ্য বানাতে চান, সেই লজিকটি Custom Hook-এ লেখবেন।
- ফাংশন ফেরত দিন: Custom Hook একটি ফাংশন হিসেবে ফেরত দিবে, যা ডেটা বা স্টেট প্রদান করবে।
Custom Hook এর উদাহরণ
ধরা যাক, আপনি এমন একটি হুক তৈরি করতে চান যা একটি কাউন্টার মান ট্র্যাক করবে এবং তা বাড়াতে বা কমাতে পারবে।
১. Custom Hook তৈরি করা (useCounter)
import { useState } from 'react';
const useCounter = (initialValue = 0) => {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
const reset = () => setCount(initialValue);
return { count, increment, decrement, reset };
};
export default useCounter;
এখানে, useCounter একটি Custom Hook যা কাউন্টারের মান, ইনক্রিমেন্ট, ডিক্রিমেন্ট এবং রিসেট করার জন্য লজিক প্রদান করছে।
২. Custom Hook ব্যবহার করা
এখন, আপনি এই Custom Hook-টিকে যেকোনো Functional Component-এ ব্যবহার করতে পারেন।
import React from 'react';
import useCounter from './useCounter'; // Custom Hook ইমপোর্ট করা
const Counter = () => {
const { count, increment, decrement, reset } = useCounter(10); // Custom Hook ব্যবহার
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increase</button>
<button onClick={decrement}>Decrease</button>
<button onClick={reset}>Reset</button>
</div>
);
};
export default Counter;
এখানে, useCounter হুকটি Counter কম্পোনেন্টে ব্যবহার করা হয়েছে। count, increment, decrement, এবং reset এই চারটি ফাংশন এবং স্টেট useCounter হুক থেকে পাওয়া গেছে।
Custom Hook এর সুবিধা
১. পুনঃব্যবহারযোগ্য কোড
Custom Hooks কোডকে পুনঃব্যবহারযোগ্য করে তোলে, অর্থাৎ আপনি একই লজিক বা ফিচার একাধিক কম্পোনেন্টে ব্যবহার করতে পারেন। এতে কোড ডুপ্লিকেশন কমে এবং মেইন্টেনেবলিটি বাড়ে।
২. বিভিন্ন লজিক আলাদা করা
Custom Hooks-এ বিভিন্ন কম্পোনেন্টের মধ্যে শেয়ার করার জন্য সাধারণ লজিক বা ফিচার আলাদা করা যায়। এতে করে কম্পোনেন্টগুলো ছোট এবং সহজভাবে পরিচালনা করা যায়।
৩. React এর বিল্ট-ইন হুকের সুবিধা
Custom Hooks তৈরি করার মাধ্যমে আপনি React এর বিভিন্ন বিল্ট-ইন হুকের সুবিধা গ্রহণ করতে পারেন। যেমন useState, useEffect, useContext, ইত্যাদি একত্রে ব্যবহার করা যায়।
৪. প্রসারিত ফিচার তৈরি করা
Custom Hooks-এ আপনি নিজের প্রয়োজন অনুযায়ী কাস্টম ফিচার বা স্টেট ম্যানেজমেন্ট লজিক তৈরি করতে পারেন যা React-এর ডিফল্ট হুকগুলোর বাইরে।
কিছু জনপ্রিয় Custom Hook উদাহরণ
- useLocalStorage - একটি কাস্টম হুক যা
localStorageব্যবহার করে ডেটা সেভ এবং রিট্রিভ করতে সহায়তা করে। - useFetch - একটি কাস্টম হুক যা API কল করতে এবং ডেটা ফেচ করতে ব্যবহৃত হয়।
- useWindowWidth - একটি কাস্টম হুক যা ব্রাউজারের উইন্ডো সাইজ ট্র্যাক করে।
উদাহরণ: useLocalStorage
import { useState } from 'react';
const useLocalStorage = (key, initialValue) => {
const storedValue = localStorage.getItem(key);
const [value, setValue] = useState(storedValue ? JSON.parse(storedValue) : initialValue);
const setLocalStorage = (newValue) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
};
return [value, setLocalStorage];
};
export default useLocalStorage;
এটি একটি কাস্টম হুক যা localStorage-এ ডেটা সেভ এবং রিট্রিভ করার কাজ করে।
উপসংহার
React-এ Custom Hooks তৈরির মাধ্যমে আপনি কোডকে আরও পরিষ্কার, পুনঃব্যবহারযোগ্য এবং মেইন্টেনেবল করতে পারেন। এতে বিভিন্ন কম্পোনেন্টের মধ্যে একে অপরের সঙ্গে লজিক শেয়ার করা সহজ হয় এবং কোডের ডুপ্লিকেশন কমে। React এর বিভিন্ন বিল্ট-ইন হুকের মতো Custom Hooks ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও দক্ষ ও স্কেলেবল করতে পারেন।
React 16.8-এ Hooks এর অন্তর্ভুক্তির মাধ্যমে, ফাংশনাল কম্পোনেন্টগুলোতে স্টেট ব্যবস্থাপনা এবং অন্যান্য React ফিচার ব্যবহারের সুবিধা পাওয়া গেছে। Hooks আপনাকে ফাংশনাল কম্পোনেন্টে ক্লাস কম্পোনেন্টের মতো স্টেট, লাইফসাইকেল মেথড এবং অন্যান্য React ফিচার ব্যবহার করতে সক্ষম করে।
এই টিউটোরিয়ালে আমরা useState এবং অন্যান্য সাধারণ hooks এর মাধ্যমে ফাংশনাল কম্পোনেন্টে স্টেট ব্যবস্থাপনা দেখব।
১. useState Hook: স্টেট ব্যবস্থাপনা
useState হলো React এর সবচেয়ে জনপ্রিয় hook, যা ফাংশনাল কম্পোনেন্টে স্টেট তৈরি করতে ব্যবহৃত হয়। useState একটি আরো মুলত একটি ফাংশন যা দুইটি ভ্যালু রিটার্ন করে:
- স্টেট ভ্যালু (current state)
- স্টেট আপডেট ফাংশন (function to update the state)
useState Hook ব্যবহার করা:
import React, { useState } from 'react';
function Counter() {
// useState(0) মানে স্টেটের প্রাথমিক মান 0
const [count, setCount] = useState(0);
// বাটনে ক্লিক করলে count বৃদ্ধি হবে
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default Counter;
ব্যাখ্যা:
useState(0)স্টেটের প্রাথমিক মান0সেট করে।countহলো স্টেট ভ্যালু, এবংsetCountহলো স্টেট আপডেট করার ফাংশন।onClickইভেন্টের মাধ্যমেsetCountব্যবহার করেcountএর মান বাড়ানো হচ্ছে।
২. useState Hook-এর মাধ্যমে স্টেট আপডেট
useState hook-এর মাধ্যমে আপনি স্টেটের মান পরিবর্তন করতে পারেন। স্টেট আপডেট করার সময়, React একটি রি-রেন্ডার ট্রিগার করে যাতে UI নতুন স্টেটের সাথে আপডেট হয়।
উদাহরণ:
import React, { useState } from 'react';
function LikeButton() {
const [isLiked, setIsLiked] = useState(false); // প্রাথমিক মান false
return (
<div>
<button onClick={() => setIsLiked(!isLiked)}>
{isLiked ? 'Unlike' : 'Like'}
</button>
</div>
);
}
export default LikeButton;
এখানে, isLiked একটি বুলিয়ান স্টেট, যা বাটনে ক্লিক করলে true বা false হতে পারে। প্রতিবার ক্লিক করলে, setIsLiked(!isLiked) স্টেটের মান পরিবর্তন করে এবং UI আপডেট হয়।
৩. স্টেট আপডেট এবং পূর্ববর্তী স্টেট
React এর useState ফাংশন আপনাকে পূর্ববর্তী স্টেটের ভিত্তিতে নতুন স্টেট সেট করার সুবিধা দেয়। যদি আপনি স্টেটের আগের মানের উপর ভিত্তি করে নতুন মান হিসাব করতে চান, তবে আপনি setState ফাংশনে একটি কলব্যাক ফাংশন ব্যবহার করতে পারেন।
উদাহরণ:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
// পূর্ববর্তী স্টেট ব্যবহার করে count বৃদ্ধি করা
const increment = () => {
setCount(prevCount => prevCount + 1);
};
return (
<div>
<p>You clicked {count} times</p>
<button onClick={increment}>Click me</button>
</div>
);
}
export default Counter;
এখানে, setCount(prevCount => prevCount + 1) ব্যবহার করা হয়েছে, যা পূর্ববর্তী count স্টেটের মানে এক যোগ করে নতুন স্টেট সেট করে।
৪. একাধিক স্টেট ব্যবহার করা
একটি কম্পোনেন্টে একাধিক স্টেট ভ্যালু রাখা সম্ভব। প্রতিটি স্টেটের জন্য আলাদা useState কল করা হয়।
উদাহরণ:
import React, { useState } from 'react';
function UserProfile() {
const [name, setName] = useState('John');
const [age, setAge] = useState(30);
return (
<div>
<h1>{name}'s Profile</h1>
<p>Age: {age}</p>
<button onClick={() => setName('Jane')}>Change Name</button>
<button onClick={() => setAge(age + 1)}>Increase Age</button>
</div>
);
}
export default UserProfile;
এখানে, name এবং age দুইটি আলাদা স্টেট ভ্যালু ব্যবহার করা হয়েছে এবং তাদের মান পরিবর্তন করতে আলাদা setName এবং setAge ব্যবহার করা হচ্ছে।
৫. স্টেট ডিফল্ট মান পরিবর্তন করা
React এর useState hook স্টেটের ডিফল্ট মান গ্রহণ করে, তবে এই মানটি যেকোনো সময় পরিবর্তন করা যায়। প্রথমবার যখন কম্পোনেন্ট রেন্ডার হয়, তখন useState প্রথম আর্গুমেন্টটি ডিফল্ট মান হিসেবে ব্যবহার করে।
উদাহরণ:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(() => {
// স্টেটের প্রাথমিক মান হিসেবে এক্সটেনাল ফাংশন ব্যবহার
return 10;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default Counter;
এখানে, useState এর মধ্যে একটি ফাংশন দেওয়া হয়েছে যা ডিফল্ট মান প্রদান করছে (যেমন ১০)।
৬. স্টেটের সাথে অবজেক্ট বা অ্যারে ব্যবহার
useState-এ আপনি অবজেক্ট বা অ্যারে ধরনের ডেটা ব্যবহারের জন্য স্টেট রাখতে পারেন। তবে, এই ক্ষেত্রে স্টেট আপডেট করার সময় নতুন অবজেক্ট বা অ্যারে তৈরি করতে হবে।
অবজেক্টের সাথে স্টেট ব্যবহার:
import React, { useState } from 'react';
function UserProfile() {
const [user, setUser] = useState({ name: 'John', age: 30 });
const updateUser = () => {
setUser(prevUser => ({ ...prevUser, name: 'Jane' }));
};
return (
<div>
<h1>{user.name}'s Profile</h1>
<p>Age: {user.age}</p>
<button onClick={updateUser}>Change Name</button>
</div>
);
}
export default UserProfile;
এখানে, অবজেক্ট user স্টেট হিসেবে ব্যবহার হচ্ছে এবং setUser এর মাধ্যমে স্টেট আপডেট করা হচ্ছে। স্টেট আপডেটের সময় আগের অবজেক্টের সঠিক কপি ধরে রেখে পরিবর্তন করা হচ্ছে (...prevUser ব্যবহার করে)।
সারাংশ
React-এ Hooks ব্যবহার করে ফাংশনাল কম্পোনেন্টে স্টেট পরিচালনা করা অত্যন্ত সহজ এবং কার্যকর। useState hook স্টেট তৈরির প্রাথমিক উপায় এবং এটি স্টেট ভ্যালু এবং স্টেট আপডেট ফাংশন প্রদান করে। useState এর মাধ্যমে আপনি UI-এর ডাইনামিক পরিবর্তন সহজেই পরিচালনা করতে পারেন, যা React অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ ও রেসপন্সিভ করে তোলে।
Read more
