title: Why is useEffect called several times?
body: <p>In my application, I use hooks to set the values of a variable. I have a function that calls the API and sets the values of the "rooms" variable.</p>
  
  <p>I used <code>useEffect</code> in order to do like <code>componentDidMount</code> lifecycle. However, even with the condition I put in my code, <code>getRooms()</code> is called up to 4 times in my application. When I render the values of rooms, I get 4 times the same room when it should be there only one time.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>export default function Rooms() {
  
      const [rooms, setRooms] = useState({})
  
      function getRooms() {
          client.get('/rooms').then((s) =&gt; {setRooms(s.data.rooms)}, (e) =&gt; {console.log(e)});
      }
  
      useEffect(() =&gt; {
          if(Object.values(rooms).length === 0) {
              getRooms();
          }
      })
  
      return (
          &lt;React.Fragment&gt;
              &lt;InfoPanel
                  title="rooms"
                  description="skip this part if you don't have any room in your house"
                  instruction="select and name every room you have" /&gt;
              &lt;ActionPanel&gt;
                  {Object.values(rooms).map((r) =&gt; {
                      return &lt;p&gt;{r.title}&lt;/p&gt;
                  })}
  
              &lt;/ActionPanel&gt;
          &lt;/React.Fragment&gt;
      )
  }
  
  
  </code></pre>
  
  <p>How can I make sure that my code is called only ONCE when the component mounts?</p>
  
  <p>N.B: "client" is axios.</p>