Cancelling a request is super easy with useEffect's cleanup
useEffect(() => {
let ignore = false;
fetchData(id).then(data => {
if (!ignore) {
setData(data);
}
});
return () => (ignore = true);
}, [id]);
I want to do something similar but I need to poll for the data with useInterval
I want to poll for data with fetchData(id) and ignore the returned response if the request had fired but the id changed before the response resolved.
Assuming you're receiving id as props or some such, would this work?
const Foo = ({ id }) => {
const [data, setData] = useState()
const passedId = useRef()
passedId.current = id
useInterval(() => {
fetchData(id)
.then(response => id === passedId.current && setData(response))
}, 5000)
// Render some JSX with the data
I tested something very similar to this locally and essentially what happens is this:
Foo receives id = 66 is stored in passedIduseInterval ticks and we request id = 6id = 77 is stored in passedIdid = 6 completes, but passedId.current === 7 so setData isn't calledid = 7 completes, id === passedId.current and setData is calleduseIntervalMaybe the reason why cancelling an effect is so easy is because the function returns its own cleanup so ignore doesn't have to be scoped externally. But setInterval doesn't allow return values. We might be able to get around this using a setTimeout instead:
function useInterval(callback, delay) {
useEffect(() => {
let cleanup
let id
function tick() {
cleanup = callback()
id = setTimeout(tick, delay)
}
if (delay !== null) {
tick()
return () => {
clearTimeout(id)
cleanup && cleanup()
}
}
return () => cleanup && cleanup()
}, [callback, delay])
One catch with this is that now we have callback in the dependency array so the callback given to useInterval should be created using useCallback:
const Foo = ({ id }) => {
const [data, setData] = useState()
const pollData = useCallback(() => {
let shouldUpdate = true
fetchData(id).then(resp => shouldUpdate && setData(resp))
return () => shouldUpdate = false
}, [id])
useInterval(pollData, 5000)
// Render some JSX with the data
useInterval is called, we setup a useEffect that executes callbackcallback executes, the return value (the cleanup for it) is stored in cleanup which is scoped to the effect and a setTimeout is setup to re-execute in delay millisecondscallback changes (i.e. we get a new id), then we clear the timeout and run the cleanup for the previous callbackdelay milliseconds, tick is executed again
pollData request would be sent immediately? That being said ... I feel like the proposed code is wrong because I don't see how it would call tick the first time :-\ Unfortunately I've been out of the React game for a couple years so I'm not sure I can properly test/edit this. Maybe I should just remove the proposal?tick() in the useEffect. That seems to make slightly more sense to me but I'm happy to get more feedback!fetchData called in a useEffect and the return value of the useEffect is a function which calls cleanup. The return value of an effect runs before the next effect starts. So, hopefully, before a second fetchData request was made, the first cleanup function would be run and shouldUpdate would be set to false for the first request.Here's the useInterval I came up with
function (callback, options, cleanup) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (options.delay !== null) {
let id = setInterval(tick, options.delay);
return () => {
clearInterval(id);
cleanup && cleanup();
}
}
return () => cleanup && cleanup();
}, [options]);
}
And I use it so
const [fetchOptions, setFetchOptions] = useState({delay: 5000, id: 'someid'});
let ignore = false;
useInterval(
() => {
fetchData(fetchOptions.id).then(data => {
if (!ignore) {
setData(data);
}
});
},
fetchOptions,
() => (ignore = true),
);
I'm not sure if there's a better way to write this. My concern is with the ignore variable being scoped to the context of the function/component. In the code example of the question, the ignore variable is inside the useEffect and feels cleaner.
The downside of this approach is that fetchOptions needs to be a useState variable otherwise it would reset the useInterval hook on every render if it was just a constant in the function.
delay changed from being a positional argument to being a named parameter in an object. Was it the intent that ignore would be inside fetchOptions? If not, can useCallback handle creating a new fetcher when the id changes and then delay and cleanup remain positional?fetchOptions intended to start a new interval when delay OR id changes?