title: Is there a way to do an api call only once in react functional component?
body: <p>Sorry if it's a beginner question></p>
  
  <p>I am trying to use Functional Component, as I was doing Class Component all the time.</p>
  
  <p>I have a simple component that should load a list from a server, and display it.</p>
  
  <p>The component looks like this (I simplified a bit so sorry if there is a type) :</p>
  
  <pre><code>const ItemRelationsList = (props: ItemRelationsListProps): JSX.Element =&gt; {
      const [getList, setList] = useState([]);
  
      const loadRelation = (): void =&gt; {
          HttpService.GetAsync&lt;getListRequest, getListResponse&gt;('getList',{
              // params
          }).subscribe(res =&gt; {
              setList(res.data.list);
          });
      }
      loadRelation();
  
  
    return (
      &lt;&gt;
          &lt;Table
              columns={columns}
              dataSource={getList}
          &gt;
          &lt;/Table&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  
  <p>thew problem I face is that everytime I use setList, the component is redraw,  so the http call is reexecute.</p>
  
  <p>Is there a way to prevent that other than use a class component ?</p>