observable array reacting to changes?

[tennox]

Hey there :)

I like observable arrays and would want to be able to create one in a way that it auto-updates when dependencies change.

function useBlocks(id) {
	return observableArrayFrom(() => {
		return dependOnSomethingAndReturnArray()
	})
}

I felt it's a computed value, but I don't want to trigger reactivity on the whole thing when calling .get(), only when accessing e.g. length or specific entries.

I've started with something like this:

const compu = computed(() => {
	return [...]
})
let arr
autorun(() => {
	const result = compu.get()
	if (!arr) arr = observable.array(result)
	else arr.replace(result)
})
return arr

but:

• I can't arr.replace outside of an action
• if this is run inside a transaction, the autorun will not run until the end of the transaction
• I'm not sure if mobx would still ensure correct order of updates, as it's not exactly a classic "computation" anymore

So I ended up with these frankenstein functions:

• autorunButAlsoImmediately
• observableArrayMap

I'm writing here because my request seems reasonable but my solution not at all 😅

I'm hoping that I'm missing an obvious thing that makes this all unnecessary, because while this seems to work, it has already brought up many edge cases & disposal weirdnesses that I would wish to not engage with 😅

[mweststrate]

I don't fully grasp what is wrong with using a computed in your case. Would you mind explaining in some more detail with a concrete (slimmed down) example what you are trying to achieve? What do you mean by "don't want to trigger reactivity on the whole thing"?

…

On Thu, Mar 21, 2024 at 11:26 AM Manuel ***@***.***> wrote: Hey there :) I like observable arrays and would want to be able to create one in a way that it auto-updates when dependencies change. function useBlocks(id) { return observableArrayFrom(() => { return dependOnSomethingAndReturnArray() })} I felt it's a computed value, but I don't want to trigger reactivity on the whole thing when calling .get(), only when accessing e.g. length or specific entries. I've started with something like this: const compu = computed(() => { return [...]})let arrautorun(() => { const result = compu.get() if (!arr) arr = observable.array(result) else arr.replace(result)})return arr but: - I can't arr.replace outside of an action - if this is run inside a transaction, the autorun will not run until the end of the transaction - I'm not sure if mobx would still ensure correct order of updates, as it's not exactly a classic "computation" anymore So I ended up with these frankenstein functions: - autorunButAlsoImmediately ***@***.***/core/src/mobx/mobx-utils.ts#L288> - observableArrayMap ***@***.***/core/src/mobx/mobx-utils.ts#L100> I'm writing here because my request seems reasonable but my solution not at all 😅 I'm hoping that I'm missing an obvious thing that makes this all unnecessary, because while this seems to work, it has already brought up many edge cases & disposal weirdnesses that I would wish to not engage with 😅 — Reply to this email directly, view it on GitHub <#3847>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBFWAAACPEQIVZKMDBTYZKYUDAVCNFSM6AAAAABFBFA7YGVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZWGQYDGNBYHE> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[tennox]

Good question.. 😅

Well mainly it was a syntax/ergonomics impulse - I want to pass around an array also to places that can take "normal" (unobservable) arrays, and I wanted to avoid having to call .get() as the ObservableArray is anyways proxified.

But what I meant with

I don't want to trigger reactivity on the whole thing
is that (as far as I understand) if I were to use computed, the places where I .get() will react on any dependency changes of the computed, but what I would want is to observe e.g. the map key (in case of ObservableMap) changes, and only update if that map key changed, not if the computation that produced the map changed. 🤔

[mweststrate]

You can pass observable arrays around as normal arrays normally, but if you want to pass a computation around, that is different, but the same as in "plain" javascript, where the only way to pass around a computed data structure is a thunk (() ==> some computation) as well.

[tennox]

Thanks for diving in so quickly!
My Question is not so much about the array part, but how to make the array track/auto update based on the result of a computation. (So like an autorun that does not wait for the current transaction to finish because it's actually a comoutation that no-one directly depends on - only on the resulting array/map/set 🤔)

And I think you might've missed the second part of my last comment because of my bad formatting 😅:

if I were to use computed, the places where I .get() will react on any dependency changes of the computed, but what I would want is to observe e.g. the map key (in case of ObservableMap) changes, and only update if that map key changed, not if the computation that produced the map changed. 🤔

Maybe I'm misunderstanding something here 😅🫣

[mweststrate]

Would you mind writing some (pseudo) code of what you are trying to achieve. It's easy to misunderstand the case in the abstract.

…

On Thu, Mar 21, 2024 at 12:20 PM Manuel ***@***.***> wrote: Thanks for diving in so quickly! My Question is not so much about the array part, but how to make the array track/auto update based on the result of a computation. (So like an autorun that does not wait for the current transaction to finish because it's actually a comoutation that no-one *directly* depends on - only on the resulting array/map/set 🤔) And I think you might've missed the second part of my last comment because of my bad formatting 😅: if I were to use computed, the places where I .get() will react on any dependency changes of the computed, but what I would want is to observe e.g. the map key (in case of ObservableMap) changes, and only update if that map key changed, not if the computation that produced the map changed. 🤔 Maybe I'm misunderstanding something here 😅🫣 — Reply to this email directly, view it on GitHub <#3847 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBAYMTYYS3XY2WPA2NDYZK66ZAVCNFSM6AAAAABFBFA7YGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DQNRUGQ2TG> . You are receiving this because you commented.Message ID: ***@***.***>

[tennox]

I tried to show a case of how I would like it to work:

// If I wrap the map in a computed, the reactive context (autorun) where I access it will trigger re-execution on any change
const computedThatUpdatesOnAnyChange = computed(() =>
  observable.map(deriveMap())
);
autorun(() =>
  console.log("with computed:", computedThatUpdatesOnAnyChange.get().get(3))
);

// If I'm creating an observable map and pass that around (without being wrapped in a computed), it works like I would want it:
const observableMap = observable.map([]);
autorun(() => {
  observableMap.replace(deriveMap());
});
// this only triggers a reactive update if the specific key updated that it depends on
function derivationThatOnlyDependsOn(index) {
  return observableMap.get(index);
}
autorun(() => console.log("without computed:", derivationThatOnlyDependsOn(3)));

(try in codepen)

As you can see in the console, when changing the seed via the button:

the variant without computed works as I'd like (only reacting to specific changes).

The problems why I cannot do this (without the frankenstein stuff I built): it depends on autorun - which:

• inside a transaction will not actually run but be queued for after, making it impossible to depend on this map similar to a computed (where you would expect it to have a value as soon as you read it the first time)
• does not auto-dispose/pause like a computed would

Let me know if this is understandable and makes sense 🤔

[mweststrate]

In the pseudo code above I see several anti-patterns:

1. const computedThatUpdatesOnAnyChange = computed(() => observable.map(deriveMap()));. A computed should not create new observable data structures. A computed computes something from state, so it shouldn't be creating something stateful itself. It's conceptually deriving 3 from doing 1 + 2. You don't want to modify the value of that 3 anymore, because it is an output of a computation. (It can be meaningful to return existing observables from a computed, but that is quite different)
   2 autorun(() => { observableMap.replace(deriveMap());});. Computed values already cache their output (normally, when observed), using an autorun to store the output of a computation will indeed just create a frankenstein loop

Since I don't know what your maps represent, I can't elaborate in much more detail, but make sure to apply the core principles of MobX as described here: https://mobx.js.org/the-gist-of-mobx.html#principles. Otherwise you're likely to use the wrong tool for the job in cases.

So roughly something like https://codepen.io/mweststrate/pen/YzMryEW?editors=0011.

Note that you modelled to create an entirely new map whenever you change the seed. That seems to be your intention since you compute all new entries. If that wasn't your intention, you should create a an observableMap and keep it around, updating it in specific places whenever you change the seed. (either by an autorun or just update it directly is often simpler)