title: useEffect for real time data update
body: <p>I am creating an easy chat app, with different text channels. I am facing an infinite loop issue when using the useEffect hook to update the messagesList on real time. You can see the code below but this is what I am trying to achieve:</p>
  <ul>
  <li>First useEffect is for the chat window to scroll to the last message every time there is a change in the messagesList array. This means: I am in the middle of the messages window, I write a new message and it takes me to the bottom. This is working fine.</li>
  <li>Second useEffect is for the messagesList to be rendered whenever the channel is changed or there is any change in the messagesList. Adding the messagesList as a dependency is causing the infinite loop... but I think I need it cause otherwise the following happens: user1 is inside the chat channel and user2 writes a new message. User1 wont see the new message displayed as his chat is not being re-rendered. How would you make it for the new message to be displayed for user1?</li>
  </ul>
  <p>Sorry for the confusing question and thanks a lot in advance!</p>
  <pre><code>    useEffect(() =&gt; {
      anchor.current.scrollIntoView(false);
    }, [messagesList]);
  </code></pre>
  <pre><code>    useEffect(() =&gt; {
      const unsubscribe = onSnapshot(
        collection(firestore, `channels/${activChannel}/messages`),
        (snapshot) =&gt; {
          console.log(snapshot.docs);
          getMessagesList();
        }
      );
      return () =&gt; unsubscribe();
  }, [activChannel, messagesList]);
  </code></pre>