رهایی از تله: رفع مشکل Stale Closures در React Hooks
Stale closures باعث از دست رفتن بیصدای دادهها در React میشوند.
فرض کنید یک داشبورد با یک تایمر پسزمینه میسازید. از setInterval داخل یک هوک useEffect استفاده میکنید تا دادهها را هر ۵ ثانیه بهطور خودکار ذخیره کند.
باگ زمانی رخ میدهد که این بازه زمانی (interval) اجرا میشود. حتی اگر کاربر یک صفحه کامل نوشته باشد، یک سند خالی ذخیره میشود. این بازه زمانی در گذشته گیر میکند و از نسخه قدیمی state شما استفاده میکند.
مشکل
وقتی useEffect اجرا میشود، متغیرهای موجود در محدوده (scope) خود را ثبت (capture) میکند.
- اگر
stateرا در آرایه وابستگی (dependency array) قرار ندهید،intervalازstateمربوط به اولین رندر استفاده میکند. - اگر
stateرا به آرایه وابستگی اضافه کنید، React با هر بار فشردن کلید،intervalرا دوباره راهاندازی میکند. این کار باعث افت شدید عملکرد و بههم خوردن زمانبندی شما میشود.
راه حل: الگوی Mutable Ref
شما باید تایمر را از دادهها جدا کنید. از هوک useRef استفاده کنید تا یک ارجاع (reference) ثابت به آخرین state خود داشته باشید. این کار از رندرهای مجدد جلوگیری کرده و interval شما را پایدار نگه میدارد.
نحوه پیادهسازی:
- یک
refبرای نگه داشتن آخرینstateخود ایجاد کنید. - از یک
useEffectاستفاده کنید تا هر زمان کهstateتغییر کرد، آنrefرا بهروزرسانی کند. intervalخود را با یک آرایه وابستگی خالی شروع کنید تا فقط یک بار اجرا شود.- در داخل callback مربوط به
intervalبه آنrefدسترسی پیدا کنید.
این روش تضمین میکند که وظایف پسزمینه شما همیشه از دادههای تازه استفاده میکنند. این کار باعث میشود رابط کاربری (UI) شما سریع و دادههایتان ایمن باقی بماند.
منبع: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7