React useEffect looping many times when fetching data and setState using fetch API

Question

Why is this triggering fetchData multiple times? The console.log seems to loop almost infinitely? How do I get this to run just once onload and trigger only once when fetchData() is called later? What am I doing wrong here or missing?

const [data, setData] = useState(null);

  let fetchData = React.useCallback(async () => {
    const result = await fetch(`api/data/get`);
    const body = await result.json();
    setData(body);
    console.log(data)
  },[data])

  useEffect(() => {
    fetchData();
  },[fetchData]);

Update (Additional Question): How to wait for data to populate before return() the below this now gives the error because it is null at first?: data.map is not a function

return (
    <select>
        {data.map((value, index) => {
            return <option key={index}>{value}</option>
        })}
    </select>
)

subashMahapatra · Accepted Answer · 2020-06-15 04:42:10Z

9

In the useCallback hook you pass data as a dependency and also simultaneously change the value of data inside the callback by calling setData, which means every time the value of data changes fetchData will be reinitialized.

In the useEffect hook fetchData is a dependency which means every time fetchData changes useEffect will be triggered. That is why you get an infinite loop.

Because you want to fetch data once when the component is mounted, I think useCallback is unnecessary here. There is no need to memoize the function fetchData unnecessarily.

Solution

const [data, setData] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    try {
     const result = await fetch(`api/data/get`);
     const body = await result.json();
     setData(body);
    } catch(err) {
      // error handling code
    } 
  }

  // call the async fetchData function
  fetchData()

}, [])

If you want to log the value of data when it changes, you can use another useEffect to do that instead. For example,

useEffect(() => {
  console.log(data)
}, [data])

P.S. - Also don't let the promise get unhandled, please use a try...catch block to handle the error. I have updated the solution to include the try..catch block.

Edit - solution for the additional question There are two possible solutions,

Because you expect the value of data to be an array after the API call you can initialize the value of data as an empty array like,

const [data, setData] = useState([]);

But if for some reason you have to initialize the value of data as null. Here is how you can render the information returned from the API call.

// using short-circuit evaluation
return (
    <select>
        {data && data.length && data.map((value) => {
            return <option key={`select-option-${value}`}>{value}</option>
        })}
    </select>
)


// using a ternary
return (
   <div>
    { data && data.length
       ? (<select>
            {
              data.map(value => <option key={`select-option-${value}`}>{value}</option>)
            }
           </select>
         )
       : <div>Data is still loading...</div>
    }
   </div>
)

Do not use indexes as key, use something unique for the key.

edited Jun 15, 2020 at 4:42

answered Jun 15, 2020 at 3:25

subashMahapatra

6,8772 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ckingchris Over a year ago

if then to render that data in the return ( <div>{orgList}</div> ) (this is just for example). It says: Cannot read property of null my guess is because the fetch call has not finished yet before the component renders?

subashMahapatra Over a year ago

This happens because data is still null on the first render. The fetch call happens after the component has mounted. Solution is to check if data exist before trying to access it's properties, you can achieve this by using a ternary operator or a short-circuit evaluation like this, { data && <div>{data.anyPropertyofData}</div>}

ckingchris Over a year ago

I updated the question above, could you show how to implement the ternary operator? Thank you I appreciate all of your help

subashMahapatra Over a year ago

Updated the answer as per your requirements, pls have a look.

Collectives™ on Stack Overflow

React useEffect looping many times when fetching data and setState using fetch API

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related