title: What if an rxjs Observable Depends on React State?
body: <p>Subscribing react state to an <a href="https://rxjs-dev.firebaseapp.com/guide/observable" rel="nofollow noreferrer">rxjs Observable</a> is simple:</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import * as r from 'rxjs'
  import * as ro from 'rxjs/operators'
  
  const obs$: r.Observable&lt;number&gt; = ...
  
  const App = () =&gt; {
    const [count, setCount] = useState(0)
    useEffect(() =&gt; {
      const subscription = obs$.subscribe(setCount)
      return () =&gt; subscription.unsubscribe()
    }, [])
    return (...)
  }
  </code></pre>
  <p>But what if my <code>Observable</code> depends on some react state and I don't want to re-subscribe every time it changes?</p>
  <pre><code>const App = () =&gt; {
    const [count, setCount] = useState(0)
    const [otherCount, setOtherCount] = useState(0)
    useEffect(() =&gt; {
      const subscription = obs$.pipe(
        ro.map(c =&gt; c + otherCount),
      ).subscribe(setCount)
      return () =&gt; subscription.unsubscribe()
    }, [otherCount]) // this will resubscribe every time `otherCount` changes
    return (...)
  }
  </code></pre>
  <p>What if <code>obs$</code> does something expensive every time it starts? Is there a safe way to do something like this without resubscribing every time <code>otherCount</code> changes?</p>