Abbrechen laufender Fetch-Anfragen mit AbortController in useEffect

import { useState, useEffect } from 'react';
 
export function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [fetchError, setFetchError] = useState(null);
 
  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
 
    async function loadUserData() {
      try {
        setFetchError(null);
        const res = await fetch(`/api/users/${userId}`, { signal });
        if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
        const data = await res.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setFetchError(err.message);
        }
      }
    }
 
    loadUserData();
    return () => controller.abort();
  }, [userId]);
 
  if (fetchError) return <p role="alert">Error: {fetchError}</p>;
  if (!user) return <p>Loading...</p>;
  return <div><h1>{user.name}</h1><p>{user.email}</p></div>;
}