title: Why is this React component rendering infinitely?
body: <p>I am having an issue with this react component here:</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import StickyNote from './StickyNote';
  
  function StickyNotes() {
  
    const [stickyNotes, setStickyNotes] = useState([]);
  
    useEffect(() =&gt; {
      console.log(&quot;Here&quot;)
      fetch(&quot;http://localhost:8080/notes&quot;)
      .then(res =&gt; res.json())
      .then(data =&gt; setStickyNotes(data))
      .catch(error =&gt; console.log('Error: ', error))
    }, [stickyNotes])
      
    
    return (
      &lt;div className=&quot;d-flex flex-wrap justify-content-center m-5&quot; &gt;
        {stickyNotes.map((note) =&gt; &lt;StickyNote title={note.title} body={note.body} id={note.id} key={note.id} /&gt;)}
      &lt;/div&gt;
    )
  }
  
  export default StickyNotes
  </code></pre>
  <p>I am trying to get all of the notes so I am doing a get request to my back end. When I first run my app I notice that my component keeps rendering infinitely. I know that I can pass in an empty array for a dependency and this behavior will stop. The problem is that I need the <code>useEffect</code> hook to run every time there is a change to the <code>stickyNotes</code> state so that when a user creates a note the screen is updated with the new note. If I pass in an empty array this won't work. I was under the impression that passing in the <code>stickyNotes</code> variable into the dependency array would only run <code>useEffect</code> when this value changes but it runs even when <code>stickyNotes</code> is not being updated. What is causing this to run infinitely?</p>