Fehlerbehebung mit exponentiellem Backoff in asynchronen React-Aktionen

import { useState } from 'react';
 
async function fetchWithRetry(url, retries = 3, delay = 500) {
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
    return await res.json();
  } catch (err) {
    if (retries <= 0) throw err;
    await new Promise((resolve) => setTimeout(resolve, delay));
    return fetchWithRetry(url, retries - 1, delay * 2);
  }
}
 
export function DataFetcher({ endpoint }) {
  const [status, setStatus] = useState({ data: null, error: null, loading: false });
 
  const handleLoad = async () => {
    setStatus({ data: null, error: null, loading: true });
    try {
      const result = await fetchWithRetry(endpoint);
      setStatus({ data: result, error: null, loading: false });
    } catch (err) {
      setStatus({ data: null, error: err.message, loading: false });
    }
  };
 
  return (
    <div>
      <button onClick={handleLoad} disabled={status.loading}>Load Data</button>
      {status.error && <p role="alert">Failed: {status.error}</p>}
      {status.data && <pre>{JSON.stringify(status.data, null, 2)}</pre>}
    </div>
  );
}