ساید افکت‌ها در React – همگام‌سازی وضعیت با localStorage با استفاده از useEffect

مقدمه

کامپوننت‌های React معمولاً خروجی خود را بر اساس پراپس‌ها و وضعیت داخلی تولید می‌کنند. اما گاهی نیاز داریم با منابع خارجی مانند localStorage، APIها، یا تایمرها تعامل داشته باشیم. این تعامل‌ها به‌عنوان ساید افکت شناخته می‌شوند و باید به‌صورت کنترل‌شده مدیریت شوند.

ذخیره‌سازی مقدار جستجو در localStorage

برای بهبود تجربه کاربری، می‌خواهیم آخرین عبارت جستجو را در مرورگر ذخیره کنیم تا پس از رفرش یا باز شدن مجدد، مقدار قبلی نمایش داده شود:

const handleSearch = (event) => {
  setSearchTerm(event.target.value);
  localStorage.setItem('search', event.target.value);
};

و برای مقدار اولیه وضعیت:

const [searchTerm, setSearchTerm] = React.useState(
  localStorage.getItem('search') || 'React'
);

مشکل در مدیریت ساید افکت

اگر فقط در هندلر مقدار را در localStorage ذخیره کنیم، در صورت استفاده از setSearchTerm در جای دیگر، همگام‌سازی از بین می‌رود. راه‌حل: استفاده از useEffect برای مدیریت مرکزی ساید افکت:

React.useEffect(() => {
  localStorage.setItem('search', searchTerm);
}, [searchTerm]);

اکنون هر بار که searchTerm تغییر کند، مقدار جدید در localStorage ذخیره می‌شود.

نکات مهم درباره useEffect

• آرگومان اول: تابعی که ساید افکت را اجرا می‌کند.
• آرگومان دوم: آرایهٔ وابستگی‌ها که تعیین می‌کند چه زمانی تابع اجرا شود.
• اگر آرایه خالی باشد، فقط یک بار هنگام mount اجرا می‌شود.
• اگر حذف شود، تابع در هر render اجرا خواهد شد.
• تابع می‌تواند یک تابع cleanup بازگرداند تا منابع آزاد شوند.

نکتهٔ پیشرفته: استفاده از ?? به‌جای ||

اگر مقدار ذخیره‌شده "" باشد، عملگر || آن را false در نظر می‌گیرد و مقدار پیش‌فرض را نمایش می‌دهد. برای جلوگیری از این رفتار، می‌توان از ?? استفاده کرد تا فقط در صورت null یا undefined مقدار پیش‌فرض اعمال شود:

const [searchTerm, setSearchTerm] = React.useState(
  localStorage.getItem('search') ?? 'React'
);

جمع‌بندی

استفاده از useEffect برای مدیریت ساید افکت‌ها باعث می‌شود کامپوننت‌ها قابل پیش‌بینی‌تر و قابل نگهداری‌تر باشند. با همگام‌سازی وضعیت با localStorage، تجربه کاربری بهبود می‌یابد و داده‌ها در مرورگر حفظ می‌شوند. این تکنیک‌ها پایه‌ای برای ساخت اپلیکیشن‌های حرفه‌ای با React هستند.