Infinite loop when fetching data with hooks

Question

I am trying to use hooks, but am in an infinite loop. The code is below. fetchSomeData and uuid get passed in from the parent component. The data that is fetched is the same every time. Thanks.

import React, { useState } from 'react';

const MyComponent = (props) => {
  const [myList, setMyList] = useState([]);

  const {fetchSomeData, uuid} = props;

  fetchSomeData(uuid)
    .then( (response) => {
      setMyList(response.payload.data.activities);
  })

  const renderItem = (item)=>{
    return (<div>{item.title}</div>)
  }

  return (
    <div> My COmponent 
      <div>
        {myList.map (renderItem)}
      </div>      
    </div>      
  )
}

export default MyComponent

Dupocas · Accepted Answer · 2019-11-13 19:06:48Z

5

Cause you're executing the fetcher function on each render, updating the state and triggering a new render, which fetches data again and so on...

Wrap your imperative code with an useEffect

useEffect(() =>{
    fetchSomeData(uuid)
        .then( (response) => {
            setMyList(response.payload.data.activities);
    })
},[uuid])

Now you're only fetching when uuid changes

answered Nov 13, 2019 at 19:06

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Infinite loop when fetching data with hooks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related