Fine-grained computed

[vladislavarsenev]

Hi!

Thanks for beautiful library! I'm just investigating whether I can use it on my project or not. I suppose, I'm using this library improperly and would appreciate any suggestion of best practice in my case.

Since documentation says that all business logic should be in store, I tried to move everything I could to there, but struggle with computed function.

I have a new card with map

const $card = map({title: '', description: ''})

And I want to hide some part of site in case title is empty
I created computed value

const $isPartHidden = computed($card, (card) => !!card.title)

But in this case $isPartHidden will be recalculated every time whatever inside $card changed. Even if I change description in it. There is a fine-grained control in useStore with keys, but it is used particularly in components and there is no such thing in computed.

As a workaround I can create every property as an atom inside map, but it seems overhead.

What would be a right move according library philosophy?

[ai]

My recommendation for this case if just to ignore and let computed() be called.

If it doesn’t generate listen event (or re-render in components with useStore($isPartHidden)) if there is no value changes (as we expected), it is OK and micro-optimizations.

[vladislavarsenev]

Thanks for answer. Totally agreed with you in given example. Let's consider another more expensive case. When user changes title I want to filter another big collection.

const $mycard = map({title: "", description: ""})
const $arrayWithManyItems = atom([]}

const $someDerivative = computed([$mycard], (card) => {
   if(value.title) {
       return $arrayWithManyItems.sort()
   }
   
   return $arrayWithManyItems
})

It will be sorted every time when I change description, but I don't want to because it would affect performance since changing of description can be frequently. All this cases are synthetic, but I believe it could be encountered in many applications.

As a solution, I see a memoization of filter function that enables us to return cached filtered collection until title is the same.

My point is how to make derivative by particular keys in map and deepMap. Sorry for confusion with ambiguous examples/

[ai]

Here is a possible solution:

const $mycard = map({title: "", description: ""})
const $arrayWithManyItems = atom([]}
const $sortedArray = computed($arrayWithManyItems, array => array.sort())

const $someDerivative = computed([$mycard, $arrayWithManyItems, $sortedArray], (card, array, sorted) => {
   if(value.title) {
       return sorted
   }
   return array
})

Another way is to create substore to listen:

// Global stores from stores/ folder
const $mycard = map({title: "", description: ""})
const $arrayWithManyItems = atom([]}

// Private stores in the file
const $sortedArray = computed($arrayWithManyItems, array => array.sort())
const $title = computed($mycard, card => card.title))

const $someDerivative = computed([$title, $arrayWithManyItems, $sortedArray], (title, array, sorted) => {
   if(title) {
       return sorted
   }
   return array
})

[vladislavarsenev]

Got it. Thank you for spending time in new year eve to clarify that!