Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState, useEffect, useCallback } from 'react';

function useFetch(url, options = {}) {
    const [data,    setData   ] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error,   setError  ] = useState(null);

useEffect(() => {
        const controller = new AbortController();
        fetchData(controller.signal);
        return () => controller.abort();
    }, [fetchData]);

return { data, loading, error, refetch: () => fetchData(new AbortController().signal) };
}

// ── Usage ──────────────────────────────────────────────────────────────────
function PostList() {
    const { data: posts, loading, error, refetch } = useFetch('/api/posts');

if (loading) return <p>Loading…</p>;
    if (error)   return <p>Error: {error} <button onClick={refetch}>Retry</button></p>;

return (
        <ul>
            {posts.map(p => <li key={p.id}>{p.title}</li>)}
        </ul>
    );
}