fetch-example.tsx

// imagine this function is out of the file 
function fetchUser(id: number, signal: AbortSignal) {
  return fetch(`/user/${id}`, { signal }).then(x=>x.json());
}

function UserDetails({ userId }: { userId: number }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const abortController = new AbortController();
    fetchUser(userId, abortController.signal).then(setUser);
    return () => abortController.abort();
  }, [userId]);
  return <>{user?.userId}</>;
}