شرح صفوف ومحتوى الفقرة
لنجمع الآن خلاصة ما أتقنته في الدروس السابقة لبناء خطاف الجلب القياسي useFetch(url). داخل هذا الخطاف سندير متغيرات data وstatus وerror، وننشئ كائن new AbortController() داخل useEffect()، ونتحقق من response.ok مع استثناء AbortError.
لاحظ مدى نقاء وبساطة المكون المستدعي بعد هذا الاستخلاص؛ فمجرد تبديل الرابط بين الدورات والمنتجات يتكفل الخطاف تلقائياً بإلغاء الطلب القديم وتحديث الواجهة.
HTML
function useFetch(url) {
const [data, setData] = useState([]);
const [status, setStatus] = useState('loading');
useEffect(() => {
const ctrl = new AbortController();
// fetch with ctrl.signal + response.ok guard
return () => ctrl.abort();
}, [url]);
return { data, status };
}