title: React UseEffect and Unsubscribe promise with conditional listener ! (Optimize Firestore onsnapshot)
body: <p>I never find a solution for my useEffect probleme : 
  I'm useing firebase and create a listener (onSnapshot) on my database to get the last state of my object "Player" I can get when the states <code>currentGroup</code> and <code>currentUser</code> are available</p>
  
  <pre><code>const [currentGroup, setCurrentGroup] = useState(null)
  const [currentUser, setCurrentUser] = useState(null)
  const [currentPlayer, setCurrentPlayer] = useState(null)
  
  const IDefineMyListener = () =&gt;{
  
      return firebase.doc(`group/${currentGroup.id}${users/${currentUser.id}/`)
         .onSnpashot(snap =&gt;{
              //I get my snap because it changed
              setCurrentPlayer(snap.data())
         }) 
  }
  </code></pre>
  
  <p>Juste above, i call a useEffect when the <code>currentGroup</code> and <code>currentUser</code> are available and (IMPORTANT) if I didn't already set the <code>currentPlayer</code> </p>
  
  <pre><code> useEffect(() =&gt; {
  
     if (!currentGroup || !currentUser)  return
  
     if (!currentPlayer) {
       let unsubscribe = IDefineMyListener()
       return (() =&gt; {
          unsubscribe() 
       })
     }
  
  },[currentGroup,currentUser])
  </code></pre>
  
  <p>As you can think,  <code>unsubscribe()</code> is called even if the <code>IDefineMyListener()</code> is not redefined. In other words, when <code>currentGroup</code> or <code>currentUser</code> changes, this <code>useEffect</code> deleted my listener whereas I NEED IT.</p>
  
  <p>How can i figure out ?! </p>
  
  <p>PS :if I remove <code>if (!currentPlayer)</code>, of course it works but will unlessly get my data </p>
  
  <p>PS2 : If I remove the unsubscribe, my listener is called twice each time.</p>