در React، هوکهای useState و useEffect برای مدیریت دادههای پویا و ساید افکتها استفاده میشوند. اما گاهی نیاز داریم منطق پیچیدهتری را در قالب یک هوک سفارشی استخراج کنیم تا قابل استفاده مجدد و قابل نگهداری باشد.
هدف این هوک سفارشی، همگامسازی وضعیت کامپوننت با 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 هستند.