একটা ফাংশনাল রিয়্যাক্ট কম্পোনেন্ট এর কাজ হচ্ছে state অথবা props ক্যালকুলেট করে একটা আউটপুট দেয়া। যদি ফাংশন টির আউটপুট দেয়া ছাড়া অন্য যেকোনো কাজ করতে হয় সেই কাজ গুলোই ফাংশানের side-effects। আর useEffect() হুক এই side-effects গুলো ইমপ্লিমেন্ট করতে ব্যবহার করা হয় অর্থাৎ সাইড ইফেক্ট এর যাবতীয় কাজ গুলো useEffect() ফাংশন এর মধ্যে করতে হয়।
side-effects এর কিছু উদাহরণ হল ডাটা ফেচিং, ম্যানুয়াল ডম ম্যানিপুলেশন, টাইমার ফাংশন এর ব্যবহার, সাবস্ক্রিপশন সেটআপ ইত্যাদি ।
useEffect() হুক একটি ফাংশন যা দুইটি আর্গুমেন্ট গ্রহণ করে একটি callback ফাংশন ও একটি dependencies এরে,
useEffect(callback[, dependencies]);
Callback: এটা স্বাভাবিক জাভাস্ক্রিপ্ট কলব্যাক ফাংশন যার মধ্যে আমাদের side-effects এর লজিক থাকবে।
dependencies: ডিপেন্ডেন্সি একটা অপশনাল অ্যারে । আমাদের কলব্যাক ফাংশনটি তখনই এক্সিকিউট করবে যখন রেন্ডারিং এর সময় এই ডিপেন্ডেন্সি অ্যারে এর কোন ভ্যালু চেঞ্জ হবে .
অর্থাৎ আমাদের side-effects লজিক গুলো থাকবে কলব্যাক ফাংশন এর ভেতর এবং ডিপেন্ডেন্সি অ্যারে ব্যবহার করে আমরা side-effects গুলো কখন রান হবে সেটা কন্ট্রোল করতে পারব।
useEffect হুক এর আরো একটি ফিচার হচ্ছে আমরা চাইলে এইখান থেকে একটা cleanup ফাংশন রিটার্ন করতে পারি. Cleanup ফাংশন টি useEffect হুক এর কাজ শেষ হয়ে গেলে রান হবে। অনেকটা ক্লাস কম্পোনেন্ট এর componentWillUnmount() মেথড এর মতো কাজ করে। আমরা আলোচনা সহজ রাখার জন্য Cleanup ফাংশনটি কোডে ব্যাবহার করবো না।
নিচে আমরা একটি রিয়্যাক্ট ফাংশনাল কম্পনেন্টে useEffect ব্যবহার করে একটা setTimeout মেথড ইমপ্লিমেন্ট করব,
import { useEffect, useState } from "react";
function Count() {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
setCount(count + 1);
}, 1000);
}, [count]);
return;
{
count;
}
}
export default Count;
প্রথমেই useEffect ও useState হুক টি রিয়্যাক্ট লাইব্রেরী থেকে ইমপোর্ট করে নিতে হবে ।
এরপর আমরা count নামে একটি state ভ্যারিয়েবল ডিফাইন করব যার ইনিশিয়াল ভ্যালু হবে 0.
const [count, setCount] = useState(0);
এরপর আমরা useEffect ফাংশন টি ব্যবহার করব,
useEffect(() => {
setTimeout(() => {
setCount(count + 1);
}, 1000);
}, [count]);
যারা functional programming এবং callback ফাংশন এর সাথে পরিচিত তাদের কাছে কোড টা অত্যন্ত সহজ তবে অন্যদের কাছে একটু জটিল মনে হতে পারে।
এখানে আসলে ব্যাপারটা তেমন কঠিন কিছু না আমরা জাস্ট useEffect হুক এর ভেতর প্রথমে একটা কল ব্যাক ফাংশন ডিফাইন করছি এটা হচ্ছে আমাদের কম্পোনেন্ট এর সাইড ইফেক্ট লজিক।
() => {
setTimeout(() => {
setCount(count + 1);
}, 1000);
এইটা হচ্ছে একটা জাভাস্ক্রিপ্ট অ্যারো ফাংশন। অ্যারো ফাংশন এর ভেতর আমরা খুব সহজ ভাষায়, প্রতি 1000 মিলি সেকেন্ড বা 1 সেকেন্ড পরপর আমাদের count এর মান 1 করে বাড়াচ্ছি। এটা একটা higher order function. Higher order function আপাতত আমাদের না বুঝলেও চলবে শুধু এর কাজটুকু বুঝলেই যথেষ্ট।
আর, নিচের লাইনে, useEffect এর দ্বিতীয় আরগুমেন্ট হিসেবে আমরা দিচ্ছি একটা ডিপেন্ডেন্সি অ্যারে যার একমাত্র এলিমেন্ট হচ্ছে আমাদের count স্টেইট ভ্যারিয়েবল। অর্থাৎ আমাদের উপরের কলব্যাক ফাংশন টি একমাত্র তখনই রান হবে যখন কাউন্ট ভ্যারিয়েবল এর মান টি পরিবর্তন হবে। আমরা চাইলে এটিকে খালি ও রাখতে পারি তবে সে ক্ষেত্রে আমাদের এই প্রোগ্রামটি ঠিকমতো রান হবে না। ডিপেন্ডেন্সি অ্যারে একমাত্র তখন ই খালি রাখতে হবে যখন আমাদের সাইড ইফেক্ট অন্য কোন ভ্যারিয়েবল এর ডিপেন্ডেন্ট থাকবে না।
}, [count]);
ফাইনালি, আমরা আমাদের JSX এ count ভ্যারিয়েবল টি শো করব।
return <div>{count}</div>;
তাহলে, প্রথমে, আমরা একটা কাউন্ট ভ্যারিয়েবল ডিফাইন করলাম যার ইনিশিয়াল ভ্যালু 0.
এরপর আমরা useEffect হুক এর প্রথম আর্গুমেন্ট হিসেবে একটা অ্যারো ফাংশন নিলাম যার কাজ হচ্ছে কাউন্ট এর মান এক করে বাড়ানো আর দ্বিতীয় আর্গুমেন্ট হিসেবে আমরা অ্যারে তে count পাস করছি অর্থাৎ, যখনই আমাদের কাউন্ট এর মান চেঞ্জ হবে তখনই আমাদের কল ব্যাক ফাংশনটি রান করবে ফাইনালি সেটা শো করবে আমাদের JSX এ।
useEffect হুক সহজে বোঝানোর একটা চেস্টা করেছি ভুল ত্রুটি বা কোন প্রশ্ন থাকলে প্লিজ জানাবেন।