شرح صفوف ومحتوى الفقرة
يبرز خطافان مخصصان إضافيان في معظم مشاريع React الاحترافية:
- خطاف
useLocalStorage(key, initialValue): يستخدم دالة التهيئة الكسولة فيuseState()داخل كتلةtry / catchلقراءة تفضيلات العرض غير الحساسة (مثل نمط البطاقات المضغوط) ومزامنتها تلقائياً عند تغيرها. - خطاف
useDebounce(value, delayMs): يؤخر اعتماد النص المتغير السريع حتى يتوقف المستخدم عن الكتابة لمدةdelayMsمللي ثانية، فينسجم بسلاسة مع خطافuseFetch.
HTML
const [compact, setCompact] = useLocalStorage(
'rx-compact',
false
);
const [search, setSearch] = useState('');
const debounced = useDebounce(search, 250);
const url = `/api/products?q=${debounced}`;
const { data } = useFetch(url);