arrow_backBACK TO DRILLS
Blue Belt - MediumuseeffectPREMIUM
AbortController Custom Hook - Attaching Cancellation to Every Fetch
A team wants every fetch triggered from a component to be cancellable when its effect re-runs or unmounts.
//REACT_MODULE
function useSearchResults(query) {
const [results, setResults] = useState([]);
useEffect(() => {
const controller = new AbortController();
fetch(/api/search?q=${query}, { signal: controller.signal })
.then(res => res.json())
.then(setResults)
.catch(() => {});
return () => controller.abort();
}, [query]);
return results;
}