Stop executing function after data change (React, useEffect)

Question

I have a function (startLoad()) which is executed every time some of my data changes (i.e. dataMayChange). Within this method i want to execute some GraphQL Queries (i.e. fireQuery1, fireQuery2, ...). Every time when my dataMayChange changes, i want to stop executing startLoad and execute it again from the beginning. This way i want to prevent the old queries before my dataMayChange has changed to be fired.

Here is my Code:

 React.useEffect(() => {   
        startLoad()     
    // eslint-disable-next-line
}, [dataMayChange])

const startLoad = async() => {
  await fireQuery1
  await fireQuery2
  await fireQuery3
  await fireQuery4
}

Does anyone have an idea how i can achieve this behavior?

T.J. Crowder · Accepted Answer · 2021-10-18 15:30:34Z

What you're looking for is a flag or signal you can provide to startLoad to tell it to stop, and a cleanup callback on useEffect.

You can do a bespoke flag or signal, or use AbortController. Here's an example of the latter but roll-your-own would look quite similar:

React.useEffect(() => {   
    const controller = new AbortController();
    startLoad(controller.signal);
    return () => {
        // This function is called when the data is changing and the
        // effect callback is about to be re-run
        controller.abort();
    };
    // eslint-disable-next-line
}, [dataMayChange]);

const startLoad = async (signal) => {
    await fireQuery1;
    if (signal.aborted) {
        return;
    }
    await fireQuery2;
    if (signal.aborted) {
        return;
    }
    await fireQuery3;
    if (signal.aborted) {
        return;
    }
    await fireQuery4;
};

That's quite repetitive, you probably want to put your actions in an array and loop through it. It's hard to show that given that fireQuery1 etc. are obviously just conceptual placeholders, but for instance:

const startLoad = async (signal) => {
    const tasks = [doThis, doThat, doTheOther, doSomethingElse];
    for (const task of tasks) {
        if (signal.aborted) {
            return;
        }
        await task(); // You can even keep track of its result to pass to the next if relevant, etc.
    }
};

If any of those actions involve things (like fetch) that support AbortController/AbortSignal, you can also pass the signal on to those things.

Collectives™ on Stack Overflow

Stop executing function after data change (React, useEffect)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related