reactjs / reactjs/react.dev

Memory leaks due to unmounting components with alive promises

Open
#654 4 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the isMounted Antipattern article and the cancelable-promise guidance referenced in the issue. Run or inspect the two supplied JavaScript memory tests to compare canceled promises with callbacks whose references are destroyed. Done means determining whether the documented approach has the reported retention behavior and updating the guidance accordingly.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.