Lazy mobx-utils keepAlive?

[realyze]

I was wondering if it's somehow possible to get the benefits of lazy execution of mobx computed with keepAlive while also being able to dispose of the computed when it's no longer needed.

Here's an example:

const mobx = require('mobx')
const mobxUtils = require('mobx-utils');

const val = mobx.observable.box(42);

// I can dispose of `c1` but it eagerly calculates `val`.
const c1 = mobx.computed(() => {
  console.log('recalculating utils keepalive');
  return val.get();
});
mobxUtils.keepAlive(c1)

// I can't dispose of `c1` but it doesn't calculate `val` until it's read.
const c2 = mobx.computed(() => {
  console.log('recalculating mobx keepalive');
  return val.get();
}, { keepAlive: true });

mobx.runInAction(() => val.set(43));
mobx.runInAction(() => val.set(44));

c2 won't calculate because it's never read but c1 will recalculate on every write (it's "eagerly" observed by keepAlive).

This would be quite useful when there's an expensive calculation and I want to avoid recalculating it until the value is actually read. But I also don't want to use keepAlive: true because of memory leaks.

The closest I can get to this is:

const reaction = new mobx.Reaction('my lazy reaction', () => {});
reaction.track((() => {  expensiveComputed.get() }));

But that uses internal mobx API.

[urugator]

I think it can be done like this:

function disposableKeepAliveComputed(expr) {
  const disposed = observable.box(false);
  const c = computed(() => {
    if (!disposed.get()) {
      return expr()
    }
  }, { keepAlive: true })

  return {
    get() {
      return c.get();
    },
    dispose() {
      disposed.set(true); // invalidate computed
      c.get(); // make sure it recalculates even without observers
    }
  }
}

The idea is to make sure it doesn't observe anything that could linger around longer than the computed itself and also the cache doesn't hold onto any ref.

[realyze]

🤔 I think the problem here is that if the computed depends on a computedFn (or a createTransformer), their internal cache will never be disposed of because they rely on onBecomeUnobserved which never fires when keepAlive: true is set.

[realyze]

(Oh and thanks so much for the suggestion!)

[urugator]

onBecomeUnobserved which never fires when keepAlive: true is set.

You're correct, but that seems like a bug to me. However you can workaround it by using dummy autorun at the end of dispose:
https://codesandbox.io/s/disposablekeepalivecomputed-qp5qhk?file=/index.js

[realyze]

Ah, this is brilliant, thanks! I tried what you have without the autorun and it didn't occur to me autorun could fix it.

I might file a bug with mobx to see if this is expected behabiour or not 👍