title: Infinite loop in React GET API call and correct way to use Hooks and useState()
body: <p>i'm new in React and i'm developing an application with standard CRUD operations to a Express.js and MongoDB remote backend.</p>
  <p>In a page I need to display values from a GET API call to a remote server, made with Axios. Every object as multiple fields, and the <em><strong>company</strong></em> field (the value in <em>Exhibitor</em> column, for example is something like <em>5f280eb605c9b25cfeee285c</em>) corresponds to the <em><strong>_id</strong></em> Mongo object field value of another object in another collection.</p>
  <p>I need to recover in the table raw the value, make another API call and get the <strong>name</strong> field (for example <em>Company name example string</em>) from the object with that _id. After that I need to display it in the table fields instead of the _id.</p>
  <p>To make it more clear for example the item.company field <em>5f27e8ee4653de50faeb1784</em> will be showed as <em>Company name example string</em>.</p>
  <p>Also I need to do the same with <em>Status</em> column (but without GET API call to a remote server), where I need to display an icon depending on <strong>item.active</strong> value, which is boolean.</p>
  <p>This needs to be done without any button, but when I open the page automatically.</p>
  <p>I've made a standard javascript function to do this but i'm getting an infinite loop, i suppose because React is calling the function every time he renders.</p>
  <p>What is the correct way to do this operation?</p>
  <p>Here's the errors from the console after the loop</p>
  <p><em>xhr.js:178 GET <a href="http://myserver.com/companies/5f280eb605c9b25cfeee285c" rel="nofollow noreferrer">http://myserver.com/companies/5f280eb605c9b25cfeee285c</a> net::ERR_INSUFFICIENT_RESOURCES</em></p>
  <pre><code>import React, { useState, useEffect, useCallback } from 'react'
  import { Tab, Tabs, Col, Form, Button } from 'react-bootstrap'
  import { FiTrash, FiCloud, FiPhoneCall, FiUserCheck, FiUserX, FiEye } from 'react-icons/fi'
  import axios from 'axios'
  
  const EventProfile = (props) =&gt; {
  
    // SOME CODE HERE //
  
    //GET STANDS FROM DB
  
    const [allStands, viewStands] = useState([{}]);
  
    useEffect(() =&gt; {
        const id = props.match.params.id
        const fetchStands = async () =&gt; {
        const response = await axios.get(`http://myserver.com/stands/${id}`);
        viewStands(response.data);
      }
      fetchStands();
    }, [])
  
  
      // RECOVER NAME USING THE COMPANY ID FROM ANOTHER COLLECTION
  
      const [companyNameGetted, getCompanyName] = useState({})
  
    const getCompanyFromId = useCallback((props) =&gt; {
      const id = props;
      const getCompany = async () =&gt; {
        const response = await axios.get(`http://myserver.com/companies/${id}`);
        getCompanyName(response.data);
      }
      getCompany([]);
    }, [])
  
      // DISPLAY ICON DEPENDING ON OBJECT active FIELD
  
  
        const handleStandStatus = (status) =&gt; {
      if(status === true) {
        return &lt;FiCloud style={{color: &quot;green&quot;}}/&gt;;
      } else {
        return &lt;FiCloud style={{color: &quot;grey&quot;}} description=&quot;Offline&quot;/&gt;;
      }
    }
     
  
     // OTHER CODE HERE //
  return (
  
       //SOME CODE HERE//
      
               &lt;Tab eventKey=&quot;stands&quot; title=&quot;Stands&quot;&gt;
            &lt;div className=&quot;py-12 w-full&quot;&gt;
              &lt;table className=&quot;table table-lg&quot;&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Status&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Exhibitor&lt;/th&gt;
                    &lt;th&gt;Size&lt;/th&gt;
                    &lt;th&gt;Color Palette&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  {allStands.map((item, index) =&gt;{
                    return(
                      &lt;tr key={index}&gt;
                        &lt;td&gt;{handleStandStatus(item.active)}&lt;/td&gt;
                        &lt;td&gt;&lt;Link to={`/standProfile/${item._id}`}&gt;{item.name}&lt;/Link&gt;&lt;/td&gt;
                        &lt;td&gt;{getCompanyFromId(item.company)}&lt;Link to={`/companyProfile/${item.company}`}&gt;&lt;span&gt;{companyNameGetted.name}&lt;/span&gt;&lt;/Link&gt;&lt;/td&gt;
                        &lt;td&gt;{item.size}&lt;/td&gt;
                        &lt;td&gt;{item.colorPalette}&lt;/td&gt;
                      &lt;/tr&gt;
                    )
                    })}
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/Tab&gt;
  
  
       // OTHER CODE HERE //
  
   )
  }
  
  export default EventProfile
  </code></pre>