Memory leaks due to unmounting components with alive promises

I just came to isMounted is an Antipattern article . I'm afraid that the solution using a cancelable promise you suggest here does not solve the potential memory leak, but hides it basically the same way as using isMounted would do.

Why?
The problem is that when a component starts some asynchronous operation (i.e. XHR) and passes a callback which should update component's state to a Promise or Promise-like interface, the callback holds a reference to the component so until the callback object exists, the component cannot be fully removed from memory.
When the cancelable promise you introduce here is canceled, no references are broken, just a boolean flag is set. Therefore the component stays in memory along with the promise.
In other words, it would be easy to un-cancel such promise by setting hasCancelled_ back to false, therefore the reference to the object have to still exist. The only thing this cancellable promise does (not) is skipping the call to resolve(val), but from the memory management view it is the same approach as asking for isMounted inside the component.

My opinion is that the only proper solution would be to abort async operations inside the promise (clear timeouts, abort XHRs) and delete the promise itself.

Update: I managed to prove my assumption using two test scripts:

// 1. create and cancel many promises, consumes all memory and crashes after a while
setInterval(()=>process.stdout.write(Math.round(process.memoryUsage().heapUsed / 1024) + " KiB        \r"), 100);

const makeCancelable = (promise) => {
    let hasCanceled_ = false;

    const wrappedPromise = new Promise((resolve, reject) => {
        promise.then(
            val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val),
            error => hasCanceled_ ? reject({isCanceled: true}) : reject(error)
        );
    });

    return {
        promise: wrappedPromise,
        cancel() {
            hasCanceled_ = true;
        },
    };
};

const makeBigStuff = size => new Array(size);
const makeLongPromise = () => new Promise((resolve, reject) => {setTimeout(resolve, 60000);});

let promised;
setInterval(function() {
    if (promised) {
        promised.cancel();
    }
    const bigStuff = makeBigStuff(100000);
    promised = makeCancelable(makeLongPromise());
    promised.promise.then(function() {
        bigStuff.noop && bigStuff.noop(); // just touch bigStuff somehow
    });
}, 10);

// 2. destroy the reference to cancel running the callback,
// also disposing resources held by the callback to be garbage collected.
// No out of memory crashes occur.
setInterval(()=>process.stdout.write(Math.round(process.memoryUsage().heapUsed / 1024) + " KiB        \r"), 100);

const weak = (callback) => {
    weakfn = function () {
        return callback && callback(...arguments);
    };
    weakfn.destroy = () => {
        callback = undefined;
    };
    return weakfn;
};

const makeBigStuff = size => new Array(size);
const makeLongPromise = () => new Promise((resolve, reject) => {setTimeout(resolve, 60000);});

let weakCallback;
setInterval(function() {
    if (weakCallback) {
        weakCallback.destroy();
    }
    const bigStuff = makeBigStuff(100000);
    promised = makeLongPromise();
    weakCallback = weak(function() {
        bigStuff.noop && bigStuff.noop(); // just touch bigStuff somehow
    });
    promised.then(weakCallback);
}, 10);

Inizia con l’articolo isMounted Antipattern e le indicazioni su cancelable-promise citate nella issue. Esegui o esamina i due test di memoria JavaScript forniti per confrontare le promise annullate con callback i cui riferimenti sono stati eliminati. Il lavoro è completato quando è stato determinato se l’approccio documentato presenta il comportamento di mantenimento segnalato e le indicazioni sono state aggiornate di conseguenza.