AbortController

import React, { useState, useEffect } from "react";

export default function SearchWithAbort() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (query === "") {
      setResults([]);
      return;
    }

    // 1. Create the controller
    const controller = new AbortController();

    fetch(`https://jsonplaceholder.typicode.com/posts?q=${query}`, {
      // 2. Connect the signal to the fetch request
      signal: controller.signal
    })
    .then(res => res.json())
    .then(data => setResults(data))
    .catch(err => {
      // 3. Handle the deliberate abort safely
      if (err.name === "AbortError") {
        console.log("Fetch aborted successfully for query:", query);
      } else {
        console.error("Real error:", err);
      }
    });

    // 4. CLEANUP: If the user types a new letter before this fetch finishes, 
    // React runs this cleanup, cancelling the old fetch!
    return () => {
      controller.abort();
    };
  }, [query]); // Runs every time query changes

  return (
    <div className="p-4 border">
      <h3>Type fast and check the console!</h3>
      <input 
        value={query} 
        onChange={e => setQuery(e.target.value)} 
        placeholder="Search posts..."
        className="border p-2 w-full"
      />
      <ul className="mt-2 text-sm text-gray-600">
        {results.slice(0, 3).map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}