My components are not updated when data arrives from fetch

Question

Here is my code:

function StockCard(props) {
  const [FetchInterval, setFetchInterval] = useState(300000);
  const [StockData, setStockData] = useState({});
  const [TrendDirection, setTrendDirection] = useState(0);
  const [Trend, setTrend] = useState(0);

  const FetchData = async () =>{
    const resp = await Axios.get(`http://localhost:8080/stock/getquote/${props.API}`)
      setStockData(resp.data);
  }

  const calculateTrendDirection = () => {
    if(StockData.lastPrice.currentPrice >  StockData.lastPrice.previousClosePrice){
      setTrendDirection(1);
    } else if (StockData.lastPrice.currentPrice <  StockData.lastPrice.previousClosePrice){
      setTrendDirection(-1);
    } else {
      setTrendDirection(0);
    }
  }

  const calculateTrend = () => {
    var result =  100 * Math.abs( ( StockData.lastPrice.previousClosePrice - StockData.lastPrice.currentPrice ) / ( (StockData.lastPrice.previousClosePrice + StockData.lastPrice.currentPrice)/2 ) );

    setTrend(result.toFixed(2));
  }


  useEffect(() => {
    FetchData();
    
    const interval = setInterval(async () => {
      await FetchData();
    }, FetchInterval)

    return() => clearInterval(interval);

  },[FetchInterval]);

  useEffect(()=>{
    if(StockData.lastPrice){
      console.log("Trends calculated", StockData.name);
      calculateTrend();
      calculateTrendDirection();
    }
    
  },[StockData])
  




    return(
        <div>
        <CryptoCard
          currencyName={StockData.lastPrice? StockData.name : "Name"}
          currencyPrice={StockData.lastPrice? `$ ${StockData.lastPrice.currentPrice}` : 0}
          icon={<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/2000px-Bitcoin.svg.png"/>}
          currencyShortName={StockData.lastPrice? StockData.symbol : "Symbol"}
          trend={StockData.lastPrice? `${Trend} %` : 0}
          trendDirection={StockData.lastPrice? TrendDirection : 0} 
          chartData={[9200, 5720, 8100, 6734, 7054, 7832, 6421, 7383, 8697, 8850]}
        />
        </div>
    )
}


export default StockCard;

The basic idea is. I have a backend from which I fetch data let's say every minute(this is why i need setInterval) and I have cards which are showing off the data i fetched. I have an expression so it says generic things like "Name" until the data has arrived, then it should re-render with the real data. But this doesn't happen. It fetches all the data, I can log it out but it doesn't get updated.

And error number 2 is it says that in the useEffects i should include the functions into dependencies.

So for example in the second useEffect where I call the function calculateTrend() and calculateTrendDirection, it says I should include not only the StockData but the two functions too.

Answer 1

I tried @Ozgur Sar 's fix and it worked, so it turned out the problem was "timing" with my api calls