Does detach remove the computed values from cache?

[aniket-banyal]

Looking at source code

mobx-state-tree/src/core/node/object-node.ts

Lines 499 to 503 in e93d97d

	detach(): void {
	if (!this.isAlive) throw fail(`Error while detaching, node is not alive.`)
	this.clearParent()
	}

it eventually calls splitCache, but I couldn't figure out whether that retains the computed values in cache or not.

If not, is there some other way to somehow copy a node along with its computed values?

[coolsoftwaretyler]

@Dummy26 - I think so. Here's an experiment that seems to evaluate a computed view after the model was detached:

https://codesandbox.io/p/sandbox/silly-galileo-ly4msx?file=%2Fsrc%2Findex.ts%3A17%2C22

Code:

import { t, detach } from "mobx-state-tree";

const Car = t
  .model({
    brand: t.string,
    model: t.string,
    year: t.number,
  })
  .views((self) => ({
    get makeModelYear(): string {
      const { brand, model, year } = self;
      console.log("evaluating");
      return `${brand} ${model} ${year}`;
    },
  }));

const ParentModel = t
  .model({
    car: t.maybe(Car),
  })
  .actions((self) => ({
    detachCar() {
      detach(self.car);
    },
  }));

const myCar = Car.create({
  brand: "Subaru",
  model: "Outback",
  year: 2019,
});

const parent = ParentModel.create({
  car: myCar,
});

// Double check the cache is working as expected.
console.log("one", myCar.makeModelYear); // Expect to see "Evaluating" once before this
console.log("two", myCar.makeModelYear); // Cached, should not see it here

parent.detachCar();
// After detaching,
console.log("after detach", myCar.makeModelYear); // "evaluating" prints again

[aniket-banyal]

Any ideas what could be the reason for this behavior?
Maybe it is because some computed values can depend on external entities (say Date.now()) and so they can't be retained in cache.

[coolsoftwaretyler]

I don't know 100% for sure, I'd have to experiment to verify, but I think it's because of where we make the instance observable with a computed flag on that key: https://github.com/mobxjs/mobx-state-tree/blob/e93d97d7292abc6a37db162e32cb20fdc7ae2967/src/types/complex-types/model.ts#L508C9-L508C23

Here's the docs for makeObservable: https://mobx.js.org/observable-state.html#makeobservable. That comes from MobX, and I wonder if modifying self by changing its parent/root busts their cache? Here's the MobX code: https://github.com/mobxjs/mobx/blob/df7e1ebd3404d4d44cd06b7d0a3b27f4c3a6aad1/packages/mobx/src/api/makeObservable.ts#L25

Not sure exactly what the mechanism is, but you could potentially test it by creating a raw MobX observable object that "looks" like an MST node with a parent or root, and setting a value as computed. Then mimic the detach behavior and see what happens.

[coolsoftwaretyler]

To your second question about moving the computed values over, I don't know of a built-in way to do it, but you could write another view on your object that basically takes a snapshot of itself and then enriches it with computed values at the time you evaluate it. Like:

import { getSnapshot, SnapshotOut, types } from "mobx-state-tree";

const Car = types
  .model({
    brand: types.string,
    model: types.string,
    year: types.number,
  })
  .views((self) => ({
    get makeModelYear(): string {
      const { brand, model, year } = self;
      return `${brand}-${model}-${year}`;
    },
  }))
  .views((self) => ({
    get snapshotWithComputedValues(): EnrichedSnapshot {
      const snapshot = getSnapshot(self);
      return { ...snapshot, makeModelYear: self.makeModelYear };
    },
  }));

export interface EnrichedSnapshot extends SnapshotOut<typeof Car> {
  makeModelYear: string;
}

const car = Car.create({
  brand: "subaru",
  model: "outback",
  year: 2020,
});

console.log(getSnapshot(car));
console.log(car.snapshotWithComputedValues);

https://codesandbox.io/p/sandbox/clever-mclaren-895qdg?file=%2Fsrc%2Findex.ts%3A34%2C1

There might be something you can do with snapshot processing hooks as well.