title: React Hook useEffect has a missing dependency "messages"
body: <p>I am trying to use MERN for the first time but now I am stuck with this code that returns the above mentioned warning and though the compilation works but some activities are missing. I am attaching my part of the code along with this.</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import Chat from &quot;./Chat&quot;;
  import Sidebar from &quot;./Sidebar&quot;;
  import Pusher from 'pusher-js';
  import axios from './axios'
  
  function App() {
    const [messages, setMessages] = useState([])
  
    useEffect(() =&gt;{
      axios.get('/messages/sync').then((response) =&gt; {
        setMessages(response.data)
      })
    }, [])
  
    useEffect(() =&gt; {
      const pusher = new Pusher('----------------', {
        cluster: '^^^'
      });
  
      const channel = pusher.subscribe('message');
      channel.bind('inserted',(newMessage) =&gt; {
        alert(JSON.stringify(newMessage));
        setMessages([...messages, newMessage])
      });
    }, [])
  
    console.log(messages)
  
    return (
      &lt;div className=&quot;app&quot;&gt;
        &lt;div className=&quot;app_body&quot;&gt;
          &lt;Sidebar /&gt;
          &lt;Chat /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>This is the console output:</p>
  <pre><code>Compiled with warnings.
  
  ./src/App.js
    Line 27:6:  React Hook useEffect has a missing dependency: 'messages'. Either include it or remove the dependency array. You can also do a functional update 'setMessages(m =&gt; ...)' if you only need 'messages' in the 'setMessages' call  react-hooks/exhaustive-deps
  
  Search for the keywords to learn more about each warning.
  To ignore, add // eslint-disable-next-line to the line before.
  </code></pre>
  <p>I am trying to build this app with a online video tutorial but this is the problem that occurs to me. How to fix this issue?</p>