Cancelling In-Flight HTTP Requests on Component Unmount with AbortController

function SearchResults({ query }) {
  const [results, setResults] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);
 
  React.useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
 
    async function performSearch() {
      setIsLoading(true);
      try {
        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal });
        const data = await response.json();
        setResults(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error('Fetch operation failed:', err);
        }
      } finally {
        setIsLoading(false);
      }
    }
 
    if (query) performSearch();
 
    return () => {
      controller.abort();
    };
  }, [query]);
 
  return (
    <div>
      {isLoading && <span>Searching...</span>}
      <ul>{results.map((r) => <li key={r.id}>{r.title}</li>)}</ul>
    </div>
  );
}