رفع مشکل Stale Closures در React Hooks
شما یک تایمر در یک React useEffect hook میسازید. میخواهید یک سند را هر پنج ثانیه بهطور خودکار ذخیره کنید. تایمر اجرا میشود، اما یک سند خالی را ذخیره میکند. کاربر ده پاراگراف تایپ کرده است، اما تایمر چیزی نمیبیند.
این یک stale closure است.
هوک useEffect متغیرها را از اولین رندر (render) ثبت میکند. اگر state را در آرایه وابستگی (dependency array) قرار ندهید، تایمر در گذشته گیر میکند و از نسخه قدیمی دادههای شما استفاده میکند.
اگر state را به آرایه وابستگی اضافه کنید، با هر بار تایپ کردن یک کاراکتر توسط کاربر، تایمر بازنشانی (reset) میشود. این کار عملکرد (performance) را مختل کرده و منطق زمانبندی شما را از کار میاندازد.
شما این مشکل را با الگوی Mutable Ref حل میکنید.
از هوک useRef برای نگه داشتن آخرین state خود استفاده کنید. این کار به تایمر شما اجازه میدهد بدون ایجاد رندرهای جدید یا بازنشانی اینتروال (interval)، به دادههای تازه دسترسی داشته باشد.
این مراحل را دنبال کنید:
- یک ref برای نگه داشتن
stateخود ایجاد کنید. - از یک
useEffectبرای همگامسازی (sync) ref باstateخود استفاده کنید. - اینتروال خود را با یک آرایه وابستگی خالی تنظیم کنید تا فقط یک بار اجرا شود.
- در داخل callback اینتروال، به ref دسترسی پیدا کنید.
این رویکرد، تایمر شما را از دادههایتان جدا (decouple) میکند. وظایف پسزمینه (background tasks) شما پایدار میمانند و دادههای شما دقیق باقی میمانند.
دیگر اجازه ندهید باگهای خاموش باعث از دست رفتن دادههای کاربران شوند. از refها استفاده کنید تا وظایف ناهمگام (asynchronous) خود را با UI همگام نگه دارید.
منبع: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7