useEffect runs only once and after refresh it does not fetch again

Question

I have this component that fetches data from a site, and tries to get its keys.
The problem is that it works fine at the first time, but when I refresh the page / save the project in VSCode (and the project refreshes automatically) it shows this error message:

TypeError: Cannot convert undefined or null to object
  14 |    )
  15 | 
  16 |    return (
> 17 |        <div className="rates">
     | ^  18 |            {Object.keys(rates.rates).map(
  19 |                rate => <Button variant="outlined">
  20 |                    {rate}

The code (the specific component):

import React, { useState, useEffect } from 'react'
import Button from '@mui/material/Button';


const RatesCard = () => {

    const [rates, setRates] = useState([]);
    useEffect(
        ()=>{
            fetch("https://api.vatcomply.com/rates")
            .then(ratesResponse => ratesResponse.json())
            .then(rates => setRates(rates));
        }
    ,[])

    return (
        <div className="rates">
            {Object.keys(rates.rates).map(
                rate => <Button variant="outlined">
                    {rate}
                </Button>
            )}
        </div>
        )
    }
    

export default RatesCard

I have no idea why it works the first time and then it doesn't. My guess is that the useEffect hook runs only once because of the [] dependency, and then when we refresh it says "Nothing changed, so I won't run the function" Thus we don't fetch anything, and thus rates is undefined ...

I have no clue why it does this, I can only guess. I will appreciate your kind help! Thank you!

Answer 1

Your default value for rates should be an empty object with rates property set to an empty array ( {rates: []} ).

By saying the following Object.keys(rates.rates).map you're going with the assumption that the rates will be an object, and rates.rates will be an array.

It works the "first" time due to how hot reloading works, because when you save your files, it injects codes to the browser and not remounting the entire app. Thus, your app will continue from where it left off before, even if it crashed on the previous load..

Change your state definition to the following: const [rates, setRates] = useState({rates:[]});

This will ensure when your app tries to run Object.keys(rates.rates).map it doesn't crash because you have an array to iterate not null / undefined

Answer 2

useEffect runs after your component is mounted which means rates is just an empty array that doesn't have a property called rates

Object.keys(rates.rates)

try to use

const [rates, setRates] = useState({rates:[]});

or make a loading indicator for example

const RatesCard = () => {

    const [rates, setRates] = useState([]);
    useEffect(
        ()=>{
            fetch("https://api.vatcomply.com/rates")
            .then(ratesResponse => ratesResponse.json())
            .then(rates => setRates(rates));
        }
    ,[])


    if(rates.length === 0) {
        return <h1> loading </hi>
     }
    return (
        <div className="rates">
            {Object.keys(rates.rates).map(
                rate => <Button variant="outlined">
                    {rate}
                </Button>
            )}
        </div>
        )

Answer 3

First, your state is equal to [] in the first render you're trying to do the following: Object.keys([].rates) and obviously here rates doesn't exist on the Array it ends up doing Object.keys(undefined) which results to the error.

So the solution to me is instead of setting the whole object to rates you can just set the rates object of the response by destructuring (cf. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring ):

  useEffect(() => {
    fetch('https://api.vatcomply.com/rates')
      .then((ratesResponse) => ratesResponse.json())
      .then(({ rates }) => setRates(rates));
  }, []);