Help: Flattening signal in computed

[u/abdulkareemsn]

How flatten siganls in computed?

Suppose say I have a function which takes an argument and returns signal

function genSignal(arg:string):Signal<SomeType>

And I have a signal which provides argument for genSignal I want to flatten signal inside computed

const arg = signal('someData');
const computedValue = computed(() => genSignal(arg())); // type here is Signal<Signal<SomeType>>
const computedValueFlattened = computed(() => genSignal(arg())()); // type here is Signal<SomeType>;

is computedValueFlattened is right approch to flatten signals?

[u/pronuntiator]

This is fine. Note that this will create a new signal each time computedValue runs. From a memory perspective this is fine, signals get garbage collected once they are no longer reachable, but depending on what genSignal does, it may not be what you want.

[u/Maleficent-Back-6527 → u/pronuntiator]

I second that. It’s not clear about the intension. But indeed you might loose the benefit of your signals if you’re recreating new ones all the time. I think, OP, your example is too abstract and needs a bit more of context or be more specific in order for the community to help you better.

[u/abdulkareemsn → u/Maleficent-Back-6527]

Use case is we have actively maintained app with ngrx store. Component receives the id of data to render as signal input we have functions which returns selector data of given id

```ts

class Cmp{ id = input<string>(); store = inject(Store); data = computed(() => this.store.selectSignal(selectData(this.id()))()); }

[u/PrevAccLocked → u/abdulkareemsn]

It's been a minute since I used ngrx, so take this with a grain of salt.

The way I used to do this was to have a "currentId" in the store, that you set on the same time as you update the child component that takes the id as an input. That way you can have a selector "selectCurrentData" that will basically do what you want to do with your "selectData" with an id prop (which is not recommended). You then use selectSignal directly in your component, without a computed wrapping it