[Solved]-Using React useEffect in a loop to fetch data from an API multiple times-Reactjs

Basically, you can only use hooks at the top level of your component.

Take a look at the rules of hooks (including useEffect).

You should try to put your if and for loop inside the useEffect.

You can use promise.all to execute promises (api fetcher) and useEffect hook from React.

useEffect(() => {
   setLoading(true); // If you want to add loader or spinner till companies info fetched
   const connectionsPromises = connections.map((connection) => {
     return VolunteerApi.getCurrentCompany(connection);
   });

   Promise.all(connectionsPromises).then((companies) => {
      setCompany(companies); // save companies 
      setLoading(false); // disable loader 
   });
}, [connections])

Promise.all resolves promises parallelly