CODEWITHSUNDEEP
javascriptreactjsasync-awaituse-effectuse-state
Sandeep Anumalla
Sandeep Anumalla

Reputation: 38

Why my State is taking so long to update?

I have used two APIs inside a useEffect. One is for params and when it returns the result. I am fetching the main API based on the array of data that I was received by first API for params and after that whatever final data I got from the main API I am setting it to the state called stocks.

The problem is that the state is not updating quickly its taking time of about 10seconds to update and I am not able to render the results because of that. I have checked using react Dev tools the state is updating after some time and I am getting the results from the API successfully.

Here is the code.

const Base = (props) => {

const [stocks,setStocks] = useState();



useEffect(()=>{
  const array = [];
    axios.get(`https://pkgstore.datahub.io/core/nyse-other-listings/nyse-listed_json/data/e8ad01974d4110e790b227dc1541b193/nyse-listed_json.json`)
    .then(response => {


      response.data.slice(0,20).map(item =>{
        
         axios.get(`https://finnhub.io/api/v1/stock/metricsymbol=${item["ACT Symbol"]}&metric=all&token=process.env.REACT_APP_TOKEN`)
            .then((response) =>{

              array.push(response)})
           
      })
           
    })
    .catch(err => console.error(err))
   setStocks(array)
},[])


 return (
    <div>
    
    <div className="table_container">
         <table class="table">
         <thead>
           <tr>
             <th scope="col">COMPANY NAME</th>
             <th scope="col">SYMBOL</th> 
             <th scope="col">MARKET CAP</th>
             <th scope="col"> </th>
             <th scope="col">CURRENT PRICE</th>
           </tr>
         </thead>
         <tbody>
       
         {
          stocks !== undefined && stocks.length > 0? 
        
         stocks && stocks.map(item=>{
              return    <p>{JSON.stringify()}</p>  //here i am getting empty [] 
                       
             })
             :<h1>{JSON.stringify(stocks)}</h1>
             
             
         }
           
         </tbody>
       </table>
         </div>
    </div>

    
)

}

export default Base;

Upvotes: 0

Views: 639

Answers (2)

user15672038
user15672038

Reputation:

The answer above should be sufficient, however, I would also check if there is a parameter you could send in the request to limit the number of items returned in the response instead of slicing the array in the frontend. Because if the response returns a very large number of objects, it might cause an overall slower response time.

Upvotes: 0

Alexis TONNEAU
Alexis TONNEAU

Reputation: 61

You are actually making a first API call, then iterating over the response to make several external API calls. This could only result to a long time operation, and it isn't related to a particular bug.

Best way to do it is to redesign API to return several values, or you should consider updating progressively the state while receiving responses.

Moreover, you should use forEach over map to iterate over data without needing the return value.

Upvotes: 1

Related Questions