title: RxJS inside React Functional Component
body: <p>The bulk of this problem is that I'm trying to create react components that each have an observable based on the component's props.  I have several locations, each with environmental readings, that I would like to independently generate D3 graphs for using RxJS to manage data coming in.</p>
  <p>I have a working version of this concept here:</p>
  <p><a href="https://www.lloydrichardsdesign.com/experiment/021" rel="nofollow noreferrer">https://www.lloydrichardsdesign.com/experiment/021</a></p>
  <p>The problem I'm having is with this example, I've hardcoded the firestore observable outside of the component.  But in my next version, I would like to make a component that can feed in the locationId to the observable when it loads and then each component manage their own state.</p>
  <p>This looks like:</p>
  <pre><code>import { Observable } from &quot;rxjs&quot;
  import { Dispatch, SetStateAction, useEffect, useState } from &quot;react&quot;;
  
  const useObservable = (observable: Observable&lt;any&gt;, setter: Dispatch&lt;SetStateAction&lt;any&gt;&gt;) =&gt; {
   useEffect(()=&gt;{
  let subscription = observable.subscribe(result =&gt; {
      setter(result);
  });
  return ()=&gt; subscription.unsubscribe()
   },[observable, setter])
  }
  
  
  const LocationItem: React.FC&lt;LocationProps&gt; = ({ location }) =&gt; {
     const [readings, setReadings] = useState&lt;Array&lt;Reading&gt;&gt;([]);
     const dataObservable = collectionData(
        db
        .collection('mimirReading')
        .where('locationId', '==', location.id)
        .orderBy('timestamp', 'desc')
        .limit(48)
    );
  
    useObservable(dataObservable, setReadings);
     return(
      &lt;ol&gt;
       {readings.map(r=&gt;&lt;li&gt;{r.timestamp}&lt;/li&gt;)}
      &lt;/ol&gt;
     )
  }
  </code></pre>
  <p>The problem is, this results in the useObservable being called over and over and over again never giving back any data.  I end up with an empty readings state and my console going crazy.</p>
  <p>I figured, I had to create the dataObservable when the component first mounts, so in useEffect, but then I would get errors related to calling useEffect inside itself. And lastly I tried pulling the subscription out and into the useEffect when first creating the component, but then the observable never collected any information.</p>
  <p>Like so:</p>
  <pre><code>useEffect(() =&gt; {
      const dataObservable = collectionData(
        db
          .collection('mimirReading')
          .where('locationId', '==', location.id)
          .orderBy('timestamp', 'desc')
          .limit(48)
      ).subscribe((reads) =&gt; {
        console.log(reads);
        setReadings(reads as Array&lt;Reading&gt;);
      });
      console.log(dataObservable);
      return () =&gt; dataObservable.unsubscribe();
    }, []);
  </code></pre>
  <p>I'm at a bit of a loss now and don't know what to do.  If anyone has any ideas or solutions it would be very much appreciated!</p>