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

Bắt đầu với bài viết isMounted Antipattern và hướng dẫn về cancelable-promise được tham chiếu trong issue. Chạy hoặc kiểm tra hai bài kiểm tra bộ nhớ JavaScript được cung cấp để so sánh các promise đã bị hủy với các callback có tham chiếu đã bị hủy. Được xem là hoàn thành khi xác định được liệu cách tiếp cận được ghi chép có hành vi giữ lại như đã báo cáo hay không và cập nhật hướng dẫn tương ứng.