دریافت داده یکی از کارهای تکراری در برنامههای React است. با ساخت یک هوک اختصاصی میتوان منطق بارگذاری، خطا و دریافت پاسخ را از کامپوننتها جدا کرد و کدی تمیزتر و قابل استفاده مجدد داشت.
ریاکت: هوک ساده برای Fetch
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}
Clean and simple, love it.