প্রতিক্রিয়া অসীম লুপ ব্যবহার করুন: কেন এটি ঘটে এবং ঠিক কীভাবে এটি ঠিক করা যায়

{
“@context”: “https://schema.org”,
“@type”: “TechArticle”,
“headline”: “প্রতিক্রিয়া অসীম লুপ ব্যবহার করুন: কেন এটি ঘটে এবং ঠিক কীভাবে এটি ঠিক করা যায়”,
“description”: “রিঅ্যাক্ট ইউজ ইফেক্ট ইনফিনিট লুপস নির্ণয় এবং ঠিক করার সম্পূর্ণ নির্দেশিকা — নির্ভরতা অ্যারে ভুল, অবজেক্ট/ফাংশন ডিপস এবং সমস্ত সাধারণ প্যাটার্ন।”,
“url”: “https://techpulsesite.com/react-useeffect-infinite-loop-why-it-hap-bn/”,
“datePublished”: “2026-06-25T17:20:00+00:00”,
“dateModified”: “2026-06-29T04:14:40+00:00”,
“author”: {
“@type”: “Organization”,
“name”: “TechPulse Editorial Team”,
“url”: “https://techpulsesite.com”
},
“publisher”: {
“@type”: “Organization”,
“name”: “TechPulse”,
“url”: “https://techpulsesite.com”
},
“inLanguage”: “bn”
}

{
“@context”: “https://schema.org”,
“@type”: “TechArticle”,
“headline”: “প্রতিক্রিয়া অসীম লুপ ব্যবহার করুন: কেন এটি ঘটে এবং ঠিক কীভাবে এটি ঠিক করা যায়”,
“description”: “রিঅ্যাক্ট ইউজ ইফেক্ট ইনফিনিট লুপস নির্ণয় এবং ঠিক করার সম্পূর্ণ নির্দেশিকা — নির্ভরতা অ্যারে ভুল, অবজেক্ট/ফাংশন ডিপস এবং সমস্ত সাধারণ প্যাটার্ন।”,
“url”: “https://techpulsesite.com/react-useeffect-infinite-loop-why-it-hap-bn/”,
“datePublished”: “2026-06-25T17:20:00+00:00”,
“dateModified”: “2026-06-29T02:19:22+00:00”,
“author”: {
“@type”: “Organization”,
“name”: “TechPulse Editorial Team”,
“url”: “https://techpulsesite.com”
},
“publisher”: {
“@type”: “Organization”,
“name”: “TechPulse”,
“url”: “https://techpulsesite.com”
},
“inLanguage”: “bn”
}

A প্রতিক্রিয়া ব্যবহার ইফেক্ট অসীম লুপ ডেভেলপারদের হুক শেখার জন্য সবচেয়ে সাধারণ বাগগুলির মধ্যে একটি। আপনার উপাদান পুনরায় রেন্ডার করে, প্রভাবকে ট্রিগার করে, যার ফলে অন্য রেন্ডার হয়, যা প্রভাবটিকে আবার ট্রিগার করে — ব্রাউজারটি ক্র্যাশ না হওয়া পর্যন্ত। কেন এটি ঘটে এবং প্রতিটি বৈকল্পিক ঠিক কিভাবে ঠিক করা যায় তা এখানে।

কেন অসীম লুপ হয়

রিঅ্যাক্ট কম্পোনেন্টের প্রতিটি রি-রেন্ডার উপাদানের ভিতরে সংজ্ঞায়িত বস্তু, অ্যারে এবং ফাংশনের জন্য নতুন রেফারেন্স তৈরি করে। যদি তোমারuseEffect নির্ভরতা অ্যারে এই মানগুলির মধ্যে একটি ধারণ করে, প্রতিক্রিয়া প্রতিটি রেন্ডারে একটি “নতুন” নির্ভরতা দেখতে পায় — এমনকি যদি ডেটা যৌক্তিকভাবে অভিন্ন হয় — এবং আবার প্রভাব চালায়, অন্যটি পুনরায় রেন্ডার করে, অন্য লুপ তৈরি করে।

কারণ 1: নির্ভরতা ছাড়াই অবস্থা নির্ধারণ করা (সবচেয়ে সাধারণ)

// 🐛 Bug: runs after every render, sets state, causes re-render
useEffect(() => {
 setCount(count + 1); // state update → re-render → effect runs again
}); // no dependency array = runs after EVERY render

// ✅ Fix: empty dependency array = run once on mount only
useEffect(() => {
 setCount(prevCount => prevCount + 1);
}, []); // runs once

কারণ 2: অবজেক্ট ইন ডিপেন্ডেন্সি অ্যারে

// 🐛 Bug: new object reference on every render
function UserProfile({ userId }) {
 const options = { method: 'GET', headers: { 'Auth': 'token' } }; // NEW object each render

 useEffect(() => {
 fetchUser(userId, options);
 }, [options]); // options is always "new" → infinite loop
}

// ✅ Fix 1: move object outside component (if it's static)
const OPTIONS = { method: 'GET', headers: { 'Auth': 'token' } }; // defined once

function UserProfile({ userId }) {
 useEffect(() => {
 fetchUser(userId, OPTIONS);
 }, [userId]); // only depends on userId
}

// ✅ Fix 2: useMemo if the object depends on props
function UserProfile({ userId, token }) {
 const options = useMemo(
 () => ({ method: 'GET', headers: { 'Auth': token } }),
 [token] // only recreates when token changes
 );

 useEffect(() => {
 fetchUser(userId, options);
 }, [userId, options]);
}

কারণ 3: নির্ভরতা অ্যারেতে কাজ

// 🐛 Bug: new function reference on every render
function DataFetcher({ id }) {
 const fetchData = async () => { // NEW function each render
 const data = await api.get(id);
 setData(data);
 };

 useEffect(() => {
 fetchData();
 }, [fetchData]); // fetchData is always "new" → infinite loop
}

// ✅ Fix: useCallback to memoize the function
function DataFetcher({ id }) {
 const fetchData = useCallback(async () => {
 const data = await api.get(id);
 setData(data);
 }, [id]); // only recreates when id changes

 useEffect(() => {
 fetchData();
 }, [fetchData]); // stable reference now
}

// ✅ Alternative: define function INSIDE the effect
useEffect(() => {
 const fetchData = async () => {
 const data = await api.get(id);
 setData(data);
 };
 fetchData();
}, [id]); // clean, no useCallback needed

কারণ 4: নির্ভরতা হিসাবে রাষ্ট্রের সাথে রাষ্ট্রীয় আপডেট

// 🐛 Bug: count is dependency AND being updated inside effect
useEffect(() => {
 const timer = setInterval(() => {
 setCount(count + 1); // depends on count → loop
 }, 1000);
 return () => clearInterval(timer);
}, [count]); // re-runs every time count changes

// ✅ Fix: use functional state update (no dependency on count)
useEffect(() => {
 const timer = setInterval(() => {
 setCount(prev => prev + 1); // no dependency on count needed
 }, 1000);
 return () => clearInterval(timer);
}, []); // runs once, updates count independently

কারণ 5: ডিপেন্ডেন্সি অ্যারেতে অ্যারে

// 🐛 Bug: new array reference on every render
function List({ items }) {
 const filtered = items.filter(i => i.active); // NEW array each render

 useEffect(() => {
 processItems(filtered);
 }, [filtered]); // always "new" → infinite loop
}

// ✅ Fix: useMemo to stabilize the array
function List({ items }) {
 const filtered = useMemo(
 () => items.filter(i => i.active),
 [items]
 );

 useEffect(() => {
 processItems(filtered);
 }, [filtered]);
}

যেকোন অসীম লুপ কিভাবে ডিবাগ করবেন

1. ব্যবহারের আগে console.log যোগ করুন ইফেক্ট: কম্পোনেন্ট কত ঘন ঘন রি-রেন্ডার হয় দেখুন।
2. প্রভাব ভিতরে রাষ্ট্র আপডেট মন্তব্য আউট: লুপ বন্ধ হলে, রাষ্ট্র আপডেট কারণ।
3. প্রতিটি নির্ভরতা লগ করুন: console.log('dep1:', dep1, 'dep2:', dep2) কোনটি পরিবর্তিত হয়েছে তা দেখতে প্রভাবের ভিতরে।
4. ESLint react-hooks প্লাগইন ব্যবহার করুন: eslint-plugin-react-hooks পতাকা স্বয়ংক্রিয়ভাবে অনুপস্থিত নির্ভরতা.

দ্রুত রেফারেন্স: কখন প্রতিটি হুক ব্যবহার করবেন

প্রশ্ন: কখন আমি একটি খালি নির্ভরতা অ্যারে ব্যবহার করব?

উত্তর: যখন প্রভাবটি শুধুমাত্র একবার মাউন্টে চালানো উচিত (যেমন, প্রাথমিক ডেটা আনা, একটি সদস্যতা সেট আপ করা)। সতর্কতা অবলম্বন করুন – এটি প্রাথমিক অবস্থার মানগুলির উপর একটি বন্ধ তৈরি করে।
প্রশ্ন: আমার কি সবসময় নির্ভরতা অ্যারেতে সবকিছু অন্তর্ভুক্ত করা উচিত?

উত্তর: হ্যাঁ, প্রতিক্রিয়ার নিয়ম অনুসারে। যদি কিছু অন্তর্ভুক্ত করার ফলে লুপ হয়, আসল সমাধান হল ইউজমেমো/ইউজকলব্যাক দিয়ে সেই মানটিকে স্থিতিশীল করা, এটিকে ডিপস থেকে সরিয়ে দেওয়া নয়।
প্রশ্ন: useMemo এবং useCallback এর মধ্যে পার্থক্য কি?

একটি মান স্মরণ করে (যেমন, একটি ফিল্টার করা অ্যারে)।
A: useMemo একটি ফাংশন memoizes. উভয়ই প্রতিটি রেন্ডারে অপ্রয়োজনীয় পুনঃসৃষ্টি প্রতিরোধ করে।useCallbackপ্রশ্ন: প্রতিক্রিয়া কেন বিকাশে দুবার ইফেক্ট ব্যবহার করে?

উত্তর: রিঅ্যাক্ট 18 স্ট্রিক্ট মোড ইফেক্টগুলিকে ইচ্ছাকৃতভাবে বিকাশে দুবার চালায় যাতে পার্শ্বপ্রতিক্রিয়াগুলি সঠিকভাবে পরিষ্কার হয় না। এটি উৎপাদনে ঘটে না।
প্রশ্ন: আমি কি ESLint-এর সম্পূর্ণ-deps নিয়ম অক্ষম করতে পারি?

উত্তর: আপনি পারেন, কিন্তু আপনার উচিত নয়। নিয়মটি বিদ্যমান কারণ অনুপস্থিত নির্ভরতা সূক্ষ্ম বাগ সৃষ্টি করে। সতর্কতা নিষ্ক্রিয় করার পরিবর্তে অন্তর্নিহিত সমস্যাটি ঠিক করুন।
উপসংহার

প্রতিক্রিয়া ব্যবহার ইফেক্ট অসীম লুপগুলি সর্বদা একটি মূল কারণে নেমে আসে:

একটি নির্ভরতা যা প্রতিটি রেন্ডারে একটি নতুন রেফারেন্স তৈরি করে, যার ফলে প্রভাব পুনরায় চালানো হয়, যা অন্য রেন্ডারকে ট্রিগার করে. ঠিক হল সবসময়ব্যবহার করে সেই রেফারেন্সটিকে স্থিতিশীল করা , অথবা উপাদানের বাইরে মান সরানোর মাধ্যমে। একবার আপনি “একই রেফারেন্স = নো রি-রান” মানসিক মডেলটি অভ্যন্তরীণ করে ফেললে, এই বাগগুলি প্রতিরোধ করা সহজ এবং ডিবাগ করা দ্রুত হয়ে যায়।useMemo, useCallback, useRefব্যবহার করে সেই রেফারেন্সটিকে স্থিতিশীল করা , অথবা উপাদানের বাইরে মান সরানোর মাধ্যমে। একবার আপনি “একই রেফারেন্স = নো রি-রান” মানসিক মডেলটি অভ্যন্তরীণ করে ফেললে, এই বাগগুলি প্রতিরোধ করা সহজ এবং ডিবাগ করা দ্রুত হয়ে যায়।