title: How do I use spread operator in useEffect without infinite loop?
body: <p>I code a Chrome extension.
  popup.html is implemented in React as follows:</p>
  <pre><code>const [blogUrls, setblogUrls] = useState&lt;string[]&gt;([]);
  
  useEffect(() =&gt; {
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) =&gt; {
      const newBlogUrls = [...blogUrls, ...request.param.blogUrls];
      setblogUrls(newBlogUrls);
  
      return true;
    });
  }, [blogUrls]);
  </code></pre>
  <p>How do I avoid an infinite loop?</p>
  <p>I know it's not good to write <code>[blogUrls]</code> even though I wrote <code>setblogUrls(newBlogUrls)</code>.</p>
  <p>But I want to write like <code>[...blogUrls,</code>.</p>
  <p>Please tell me how to resolve this contradiction.</p>