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);

從 isMounted Antipattern 文章以及 issue 中引用的 cancelable-promise 指南開始。執行或檢查提供的兩個 JavaScript 記憶體測試，以比較已取消的 promise 與其參照已被銷毀的回呼。完成的標準是確定文件所述方法是否存在回報的保留行為，並相應更新指南。