title: Infinite Loop React
body: <p>I'm new in React, and i have problems to show the content of an array.
  I have a state to store the data (initial value []). Then, I have a function to consume frmo an api with a get, then i store that data in the state, and finally, I iterate over the state to show it on the page. Everything's is ok, the function gives return the values, but in the console, the return is enter in a infinite loop, slowing down the browser.</p>
  <p>Here I detach the code</p>
  <p>The state where i store the values</p>
  <pre><code>const [projects, setProjects] = useState([]);
  </code></pre>
  <p>Function that consumes the api and save it in the state</p>
  <pre><code>const getData = async () =&gt; {
  let allProjects = {};
  const res = await axios.get(URL_BASE);
  allProjects = res.data;
  setProjects(allProjects);
  console.log(projects);
  };
  </code></pre>
  <p>useEffect to refresh the render when projects is change</p>
  <pre><code>useEffect(() =&gt; {
  getData();
  }, [projects]);
  </code></pre>
  <p>This is where i iterate</p>
  <pre><code>return (
  &lt;div&gt;
    &lt;p&gt;La cantidadd de proyectos en total son:&lt;/p&gt;
    {getData() &amp;&amp; projects.map((proyecto) =&gt; &lt;div&gt;{proyecto.titulo}&lt;/div&gt;)}
  &lt;/div&gt;
  );
  </code></pre>