useEffect হলো React এর অন্যতম হুক (hook) যার দ্বারা functional component এর মাধ্যমে এ্যাপ্লিকশনে বিভিন্ন ধরনের সাইড ইফেক্ট সম্পাদন করতে সাহায্য করে। সাইড ইফেক্ট এর মধ্যে অন্যতম – ডাটা ফেচিং, সাবস্ক্রিপশনস, ম্যানুয়ালি DOM (Document Object Model) পরিবর্তন ইত্যাদি কাজ সম্পন্ন করার জন্য useEffect ব্যবহার করা হয়। পাশাপাশি কম্পোনেন্টের lifecycle method পরিচালনা করতে ব্যবহৃত হয় এবং কম্পোনেন্টটি রেন্ডার হওয়ার পর কি ঘটবে তাও নিয়ে কাজ করে থাকে।
useEffect এর সিনট্যাক্স –
[
useEffect(() => {
// Your code for side effects goes here
// It will run after every render by default
return () => {
// Cleanup code (optional)
// It will run before the component is unmounted
};
}, [dependencies]);
]
উপরের উদাহরণ বিশ্লেষণ –
✔ প্রথম Argument হলো একটি ফাংশন যেখানে সাইড
ইফেক্ট এর কোডগুলো থাকে।
✔ দ্বিতীয় Argument হলো dependencies অ্যারে।
dependencies এর মধ্যে কোন পরিবর্তন হলে তা ইফেক্টটি পুনরার রি-রেন্ডার হয়। dependencies
অ্যারে এর ব্যাবহার –
- যদি useEffect এর dependencies অ্যারে না দেওয়া হয়, তাহলে সাইড ইফেক্টটি প্রতি রেন্ডারে রান হয়।
- যদি useEffect এর dependencies অ্যারে [] দেওয়া হয় এবং অ্যাারে [] এর মধ্যে কিছু না দেওয়া হয় বা খালি থাকে তাহলে সাইড ইফেক্টটি প্রাথমিকভাবে রেন্ডারটি একবার রান হয়।
- যদি useEffect এর dependencies অ্যারে এর মধ্যে [value বা props] দেওয়া হয়, তাহলে শুধুমাত্র অ্যারে এর মধ্যে dependencies [value বা props] এর পরিবর্তনের উপর সাইড ইফেক্টটি রেন্ডার হয়।
✔ তৃতীয় useEffect এর ক্লিনআপ ফাংশন (cleanup
function), এটি সাধারনত ব্যবহার করা হয়, যখন কম্পোনেন্টটি আনমাউন্ট (unmount) করা হয়
বা যখন useEffect এর dependencies পরিবর্তন হয়। এটি একটি ঐচ্ছিক ফাংশন (optional
function) যার মাধ্যমে useEffect হুক থেকে রিটার্ণ (return) মান হিসাবে প্রদান করা
যায়।
[
import React, { useState, useEffect } from 'react';
function EffectComponent() {
const [data, setData] = useState([]);
useEffect(() => {
// Fetch data after the component has been rendered
const fetchData = async () => {
const response = await fetch('https:api-url/data');
const result = await response.json();
setData(result);
};
fetchData();
// Cleanup function (optional): cancel subscriptions, timers, etc.
return () => {
// Cleanup logic goes here
};
}, []); // Here Empty dependency array means the effect runs only once after initial render
return (
<div>
{/* Render your component using the fetched data */}
{data.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
}
]
আশা করি আপনি আজকের এই ব্লগটি মনোযোগ
সহকারে পড়েছেন। আজকের ব্লগটি আপনার কাছে কেমন লেগেছে অবশ্যই
কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। পোষ্টে উল্লিখিত কোনো অংশ যদি বুঝতে সমস্যা হয়, তাহলে কমেন্ট বক্সে জানিয়ে দিন। ইনশাআল্লাহ্, সমস্যা সমাধানের চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন ব্লগে। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
