Solve memory leak with circular dependencies of streams

[ronag]

This is an issue I keep getting stuck at in different context. When the parent needs to listen of events of the child, how do you break or avoid a cycle?

e.g.

function List(sources) {
  const actions = intent({ ...sources, click$: ??? })
  const state = model(actions).shareReplay(1)

  const items$ = state
    .flatMapLatest(({ items, selected }) => 
      items.map(item => Item({ 
        ...sources, 
        props$: Observable.of({ id: item.id, selected: item.id === 'selected' })
      }))

  const click$ = items$.map(items => Observable.merge(...items.map(item => item.click$)))

  return {
    ...
  }
}

Basically the following flow:

click => List => selected => Item => click

Which gives me a cycle. How do I get around this? I could use a proxy as I've seen in some examples:

  const clickProxy = new Subject()
  const actions = intent({ ...sources, click$: clickProxy })

  const subscription = click$.subscribe(clickProxy)

  // subscription leaks...

However, that gives me a memory leak...

[staltz]

The cycle is unavoidable, the proxy technique is needed. Good question how to avoid the memory leak.

[staltz]

Let me actually open this as a bug and rename the title.

[TylorS]

It is totally situation dependent, but using click$.takeUntil(something$).subscribe(clickProxy) might work in some situtations.

[ronag]

Other alternatives I've been thinking of is using form of driver or Observable.using, but nothing really feels good...

@TylorS: How about the situation in my example?

[TylorS]

@ronag Is there something triggered by a source that causes this component to be removed from view? e.g. a route change from sources.history or source.router or anything like that?