title: Change child target of Firebase .on in a react component and stop listening for changes to previous child
body: <p>I am attempting to use Firebase for a chat app.</p>
  
  <p>I am trying to have a listener on the currently selected message to check if new messages have arrived.</p>
  
  <p>On my "MessageBody" component I have set up a realtime listener using .on("value"). Code below:</p>
  
  <pre><code>MessageBody.js
  
  class MessageBody extends Component {
  
      getMessages = (turnOffRef) =&gt; {
          const db = firebase.database();
          const newMessageRef = db.ref().child('messages').child(this.props.currentChatId);
          newMessageRef.on('value', snap =&gt; {
          console.log("CHAT ID IN SNAP: ", this.props.currentChatId);
          this.props.onGotMessageContent(snap.val());
          });
      };
  
      componentDidMount() {
          this.getMessages();
      }
  
  //... other unrelated code
  
      const mapDispatchToProps = dispatch =&gt; {
      return {
          onGotMessageContent: (messages) =&gt; dispatch(actions.setMessageContent(messages)),
      };
  };
  </code></pre>
  
  <p>redux message action.js</p>
  
  <pre><code>export const setMessageContent = (messages) =&gt; {
      return {
          type: actionTypes.ADD_SELECTED_CHAT_TO_STATE,
          messages: messages,
      };
  };
  </code></pre>
  
  <p>Redux messages reducer:</p>
  
  <pre><code>const addSelectedChatToState = (state, action) =&gt; {
      return {
          ...state,
          currentMessage: action.messages,
      };
  };
  
  // other code...
  
  const reducer = (state = initialState, action) =&gt; {
      switch(action.type) {
          // other cases:... 
          case actionTypes.ADD_SELECTED_CHAT_TO_STATE: return newMessageReceived(state, action);
          default: return state;
      }
  };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dFoTm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dFoTm.png" alt="enter image description here"></a></p>
  
  <p>This does receive realtime updates for the currently selected "messages" child. However, if I have previously been listening to another message (sent to MessageBody via props), I get a snap event any time either message receives an update.</p>
  
  <p>So, in the above instance I was previously listening to "-L3ylXhU3zSNvPB3h_uS", then sent a new reference of "-L3ylh4b4yuSRvYkH1ai" via props. But now any time there is an update on either Child of message I receive an update when I only wish to for the current this.props.CurrentChatId.</p>
  
  <p>If I first go to chat "-L3ylXhU3zSNvPB3h_uS", I get the following in console:</p>
  
  <pre><code>CHAT ID IN SNAP:  -L3ylXhU3zSNvPB3h_uS
  </code></pre>
  
  <p>If I then go to chat "-L3ymmWaLe9qCmAeJlO7", I get the following in console:</p>
  
  <pre><code>CHAT ID IN SNAP:  -L3ymmWaLe9qCmAeJlO7
  </code></pre>
  
  <p>However, if a message is then sent to me on message L3ylXhU3zSNvPB3h_uS, while I am still in L3ymmWaLe9qCmAeJlO7, I get the following in console:</p>
  
  <pre><code>CHAT ID IN SNAP:  -L3ylXhU3zSNvPB3h_uS
  </code></pre>
  
  <p>Is there a way to kill off the old listener upon changing the child, but keep the current listener active for new messages in this child?</p>