AbortSignal Integration for Cancelable Async Side Effects in React Hooks

import { useState, useEffect, useRef } from 'react';
 
export function useCancelableFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const abortControllerRef = useRef(null);
 
  useEffect(() => {
    abortControllerRef.current?.abort('Component unmounted or URL changed');
    const controller = new AbortController();
    abortControllerRef.current = controller;
 
    async function executeFetch() {
      try {
        const response = await fetch(url, { signal: controller.signal });
        if (!response.ok) throw new Error(`HTTP Error ${response.status}`);
        const json = await response.json();
        setData(json);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err);
        }
      }
    }
 
    executeFetch();
    return () => controller.abort('Cleanup triggered');
  }, [url]);
 
  return { data, error };
}