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

مقدمه

در React، هوک‌های useState و useEffect برای مدیریت داده‌های پویا و ساید افکت‌ها استفاده می‌شوند. اما گاهی نیاز داریم منطق پیچیده‌تری را در قالب یک هوک سفارشی استخراج کنیم تا قابل استفاده مجدد و قابل نگهداری باشد.

ساخت هوک useStorageState

هدف این هوک سفارشی، همگام‌سازی وضعیت کامپوننت با localStorage مرورگر است. استفاده از آن مانند useState خواهد بود:

const [searchTerm, setSearchTerm] = useStorageState('search', 'React');

درون هوک، از useState برای مقداردهی اولیه و از useEffect برای ذخیره‌سازی مقدار جدید استفاده می‌کنیم:

const useStorageState = (key, initialState) => {
  const [value, setValue] = React.useState(
    localStorage.getItem(key) || initialState
  );

  React.useEffect(() => {
    localStorage.setItem(key, value);
  }, [value, key]);

  return [value, setValue];
};

اصول طراحی هوک سفارشی

• نام هوک باید با use شروع شود.
• مقدار بازگشتی معمولاً یک آرایه شامل مقدار فعلی و تابع به‌روزرسانی است.
• هوک باید قابل استفاده مجدد و مستقل از دامنه خاص باشد.
• پارامتر key باید یکتا باشد تا از تداخل در localStorage جلوگیری شود.

مزایای استفاده از هوک سفارشی

• جدا کردن منطق پیچیده از کامپوننت‌ها
• قابلیت استفاده مجدد در چند کامپوننت
• ترکیب چند هوک داخلی یا سفارشی
• امکان انتشار به‌عنوان کتابخانه خارجی

جمع‌بندی

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