ফাঁদ থেকে মুক্তি: React Hooks-এ Stale Closures সমাধান করা
Stale closures React-এ নিঃশব্দে ডেটা হারানোর কারণ হয়ে দাঁড়ায়।
আপনি একটি ব্যাকগ্রাউন্ড টাইমারসহ একটি ড্যাশবোর্ড তৈরি করছেন। প্রতি ৫ সেকেন্ড অন্তর ডেটা অটো-সেভ করার জন্য আপনি একটি useEffect হুকের ভেতরে setInterval ব্যবহার করছেন।
যখন ইন্টারভালটি (interval) ট্রিগার হয়, তখন বাগটি দেখা দেয়। ব্যবহারকারী যদি একটি পুরো পৃষ্ঠা টাইপও করেন, তবুও এটি একটি খালি ডকুমেন্ট সেভ করে। ইন্টারভালটি অতীতের একটি অবস্থায় আটকে থাকে। এটি আপনার state-এর একটি পুরনো ভার্সন ব্যবহার করে।
সমস্যাটি কী
যখন useEffect চলে, তখন এটি তার স্কোপের (scope) ভেরিয়েবলগুলোকে ক্যাপচার করে নেয়।
- আপনি যদি
dependency array-এর বাইরেstateরেখে দেন, তবে ইন্টারভালটি প্রথম রেন্ডারের (render)stateব্যবহার করবে। - আপনি যদি
dependency array-তেstateযোগ করেন, তবে React প্রতিটি কি-স্ট্রোকের (keystroke) সাথে ইন্টারভালটি পুনরায় শুরু করবে। এটি পারফরম্যান্স কমিয়ে দেয় এবং আপনার টাইমিং নষ্ট করে দেয়।
সমাধান: The Mutable Ref Pattern
আপনাকে টাইমার এবং ডেটাকে আলাদা করতে হবে। আপনার সর্বশেষ state-এর একটি constant reference বজায় রাখতে useRef হুক ব্যবহার করুন। এটি re-render হওয়া এড়ায় এবং আপনার ইন্টারভালকে স্থিতিশীল রাখে।
এটি কীভাবে ইমপ্লিমেন্ট করবেন:
- আপনার সর্বশেষ
stateধরে রাখার জন্য একটিrefতৈরি করুন। - আপনার
stateপরিবর্তন হওয়ার সাথে সাথে সেইrefআপডেট করার জন্য একটিuseEffectব্যবহার করুন। - একটি খালি
dependency arrayদিয়ে আপনার ইন্টারভাল শুরু করুন যাতে এটি কেবল একবারই চলে। - আপনার ইন্টারভাল কলব্যাকের (
callback) ভেতরেref-টি অ্যাক্সেস করুন।
এই পদ্ধতিটি নিশ্চিত করে যে আপনার ব্যাকগ্রাউন্ড টাস্কগুলো সবসময় একদম নতুন (fresh) ডেটা ব্যবহার করছে। এটি আপনার UI-কে দ্রুত রাখে এবং ডেটাকে সুরক্ষিত রাখে।
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7