رفتن به محتوای اصلی

ری‌اکت: هوک ساده برای Fetch

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

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 };
}

1 Comment

ثبت دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.