Tracking only array length

[stellarhoof]

How come simply accessing the array length is tracked when the array stays the same size?

import { action, autorun, observable } from "mobx"

let numbers = observable([1, 2, 3])
autorun(() => console.log(numbers.length))
action(() => (numbers[2] = 10))()

In the above example, the tracked function inside autorun runs twice.

Also, is there any way of tracking the array size only?

[urugator]

Atm observable array is backed by single Atom. We would need a seperate atom for length. Tbh dunno if it's intentional, legacy reasons or oversight. cc @mweststrate

Also, is there any way of tracking the array size only?

No, but you can wrap it in extra computed to prevent the outer derivation from re-running.

autorun(() => console.log(computed(() => numbers.length).get()))

[stellarhoof]

Thank you

[mweststrate]

Yes it is an intentional performance trade off, to avoid creating to many subscriptions when looping / mapping over an array. Note that a simpler way to achieve the above is reaction(() => array.length, length => { effect });

…

On Thu, 27 Oct 2022, 14:59 Alejandro Hernandez, ***@***.***> wrote: Thank you — Reply to this email directly, view it on GitHub <#3552 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBCF3UFSUNAPSAKJPXTWFJ4EDANCNFSM6AAAAAARPOOEYM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[urugator]

to avoid creating to many subscriptions

Not disputing, just making sure we are on the same page here - the issue isn't about subscription per index, but an extra atom for length to differentiate length changes from value changes (of any index). So we are talking about maximum of two subscriptions instead of one per array.

[stellarhoof]

reaction(() => array.length, length => { effect })

This was actually my first approach which has the downside of having to dispose of the reaction. I ended up going with @urugator's suggestion of computed. Here's the before/after:

Before:

let useReactiveMemo = (fn) => {
  let [value, setValue] = React.useState(() => untracked(fn))
  React.useEffect(
    () =>
      reaction(fn, (next) =>
        setValue((prev) => (_.isEqual(prev, next) ? prev : next))
      ),
    []
  )
  return value
}

After:

let useComputed = (fn) => _.head(React.useState(() => computed(fn, { equals: comparer.structural })))

[mweststrate]

the issue isn't about subscription per index, but an extra atom for length to differentiate length changes from value changes (of any index)

@urugator sorry, missed that, the idea never occurred to me, but that should work!

[mweststrate]

This was actually my first approach which has the downside of having to dispose of the reaction

@stellarhoof not sure if I parse the sentence correctly, but both autorun and reaction need disposing.

[stellarhoof]

The code I'm working on is reaction vs. computed. I just picked the autorun as an example.

But I'm glad you're open to tracking length as a different atom 👍

I can give this a shot if you'd like