use controller.abort()
to abort a fetch (mid call)
caveats
- can only be used once therefore,
- the abort controller should be created (
new
) and consumed in the same block / scope
refactor this below, should be a function that returns two functions
const [ fetch, abort ] = abortableFetch()
const App = () => {
const [state, setState] = useState({})
useEffect(() => {
const controller = new AbortController()
fetch("/some_url", {
signal: controller.signal,
})
.then(res => res.json())
.then(json => setState(json))
return () => {
controller.abort()
}
}, [])
return (
<div>
</div>
)
}