title: How to correctly assign axios response to react function component state
body: <p>I have problem as in title.
  My code give me an infinite loop - the console log is looping all time.</p>
  <p>I just want to assign axios response to component state nad render elements via .map()</p>
  <p>component:</p>
  <pre><code>const Translator = () =&gt; {
      const [languages, setLanguages] = useState([]);
      getLanguages().then(data =&gt; {
         setLanguages(data.languages)
      });
      
      console.log(languages);
    
    return (
      &lt;header className=&quot;translator__header&quot;&gt;
          {languages.map( lang =&gt; {
              &lt;h1&gt;{lang.language}&lt;/h1&gt;
          })}
      &lt;/header&gt;
    );
  };
  </code></pre>
  <p>resource:</p>
  <pre><code>export default () =&gt; {
      return Axios.get(`${config.baseURL}/languages`, {headers: config.headers}).then(res =&gt; {
          return res.data.data;
      });
  }
  </code></pre>
  <p>request give array with object like this</p>
  <pre><code>{language: &quot;af&quot;}
  </code></pre>