Reactive array transformation

What is the correct way to make the result of a filtering+mapping operation on an array reactive?

  return store.productTreeData
    .filter(e => e.parentId == parentId)
    .map(e => {
      const children = ...
      return { productTreeItem: e, children: children.length > 0 ? children : null };
    });

  return store.productTreeData
    .filter(e => e.parentId == parentId)
    .map(e => {
      const children = ...
      return { productTreeItem: e, children: children.length > 0 ? children : null };
    });

What should I write instead of the object literal? What I would like to do is to refactor some code to separate functions but the result to remain "reactive". Thanks.

5 Replies

snorbiOP•2mo ago

Maybe I misunderstand the core concepts, and such array transformations in a "tracking context" are reactive by default? I'm coming from Jetpack Compose where the "reactivity magic" happens mostly in compile time, and I try to switch my brain to the runtime "reactivity magic" 😅

Brendonovich•2mo ago

Since you're reading and iterating productTreeData it'll already be reactive, assuming that you're doing so inside a memo or effect

snorbiOP•2mo ago

Thanks, I will look at my code one more time. (It did not work for some reason but probably I called it from a wrong place - not a memo or effect or jsx.)

Brendonovich•2mo ago

Keep in mind that if anything changes then that whole expression will re-run, generating a new array. That could be fine for your case though

ryansolid•2mo ago

Yeah this is an interesting topic in a wider sense. I going to think through it. The challenge is there are varying degrees of solutions in this space. You can always take the immutable route but the mutable route is often more optimal but requires rethinking of logic. I need to think about where it is applicable and how one would know.

Gaming

Programming

Reactive array transformation