title: Too many re-renders. React limits the number of renders
body: <p>Im trying to save my articles object from my graphql server to the state, but its giving me this error &quot;too many re-renders&quot; when I try to save them to the state</p>
  <p>I checked with a console.log on the client and the method getNews() is giving me the correct output object with my x50 article object, but when I try to save it to the state, it crashes</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import Layout from "../components/Layout";
  import Article from "../components/Article";
  
  import { useState, useEffect } from "react";
  import { gql, useQuery } from "@apollo/client";
  
  const News = () =&gt; {
    const [articles, setArticles] = useState([]);
  
    const getNews = () =&gt; {
      const LATEST_NEWS = gql`
        query {
          getNews {
            title
          }
        }
      `;
  
      const { data } = useQuery(LATEST_NEWS);
      const myArticles = data.getNews;
      return myArticles;
    };
  
    useEffect( () =&gt; {
      setArticles(getNews())
    },[])
  
    console.log(articles)
    return (
      &lt;&gt;
        &lt;Layout page="News" /&gt;
  
        &lt;h1 className="text-xl  text-center text-gray-800 font-bold m-8"&gt;
          The latest news about crypto!
        &lt;/h1&gt;
  
        {/* &lt;div className="grid grid-cols-1 gap-3 text-center m-8 md:grid-cols-3"&gt;
          {articles.map((article) =&gt; (
            &lt;Article key={article.id} article={article} /&gt;
          ))}
        &lt;/div&gt; */}
      &lt;/&gt;
    );
  };
  
  export default News;</code></pre>
  </div>
  </div>
  </p>