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 与其引用已被销毁的回调。完成的标准是确定文档所述方法是否存在报告的保留行为，并相应更新指南。