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