Abbrechen laufender asynchroner Fetch-Anfragen in React-Effects mittels AbortController

import { useState, useEffect } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
 
    async function loadUserData() {
      try {
        const res = await fetch(`/api/users/${userId}`, { signal });
        const data = await res.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error('Fetch failed:', err);
        }
      }
    }
 
    loadUserData();
 
    return () => {
      controller.abort();
    };
  }, [userId]);
 
  return user ? <div>{user.name}</div> : <p>Loading...</p>;
}