// Cancel pending requests when navigating away
useEffect(() => {
  const controller = new AbortController();

  fetch('/api/data', { signal: controller.signal })
    .then(r => r.json())
    .then(setData)
    .catch(err => { /* ignore aborts */ });

  return () => controller.abort(); // Cleanup on unmount
}, []);

function SearchBox() {
  const controllerRef = useRef(null);

  async function handleSearch(query) {
    if (controllerRef.current) {
      controllerRef.current.abort(); // Cancel previous request
    }

    controllerRef.current = new AbortController();

    try {
      const results = await fetch(`/api/search?q=${query}`, {
        signal: controllerRef.current.signal
      });
      // Update results…
    } catch (err) {
      if (err.name !== 'AbortError') throw err;
    }
  }
}