React Hooks infinite loop Memory leak?

Question

Hello i have a problem with infinite loops. All the exampels i look at makes the loop go away. But then it wont update my view if i dont refresh. I want the items to appear when something gets added. i thought my example would work but it does not. I dont know how to fix it

      const [ReadBookingTimes, SetBookingTimes] = useState([]);
      const [readStatus, setStatus] = useState("");
        
        const getBookingTimes = async () => {
            try {
              const response = await Axios.get(`${API_ENDPOINT}`);
              console.log(response);
              // debugger;
              SetBookingTimes(response.data);
              // setStatus("Connection sucsessfull");
            } catch (err) {
              setStatus("Error getting BookingTimes");
            }
          };
        
          //reupdate State and prevent infinite loop
          useEffect(() => {
            getBookingTimes(ReadBookingTimes);
          }, [ReadBookingTimes]); //);

Navid Zarepak · Accepted Answer · 2020-11-22 11:16:25Z

1

Your useEffect has a dependancy ReadBookingTimes which updates every time. Bascially, you update the ReadBookingTimes every single time over and over again.

What you should do is to add a condition to check if your data is already loaded and if so, don't call the function:

const [ReadBookingTimes, SetBookingTimes] = useState([]);
const [readStatus, setStatus] = useState("");

const [dataLoaded, setDataLoaded] = useState(false);


 const getBookingTimes = async () => {
     // Your fetch code
     setDataLoaded(true)
 }

 useEffect(() => {
     // don't go any further of data is already loaded.
     if (dataLoaded) return;

     getBookingTimes(ReadBookingTimes);
 }, [ReadBookingTimes, dataLoaded]);

Now you won't get stuck in a loop. And anytime you want to reload the data, you can change the dataLoaded to false and useEffect will call the getBookingTimes function again.

In case you want to get the data every 2 minutes for example, you can add a timeout to change the dataLoaded state every time causing another data reload.

answered Nov 22, 2020 at 11:16

Navid Zarepak

4,2182 gold badges15 silver badges28 bronze badges

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

7 Comments

M R Over a year ago

should my dataloaded be after the response data?

M R Over a year ago

I tried this and it doesnt update my view when adding items. but it doesnt loop anymore or maybe it doesnt trigger now because im loading data with Postman? or it should rerender?

Navid Zarepak Over a year ago

Yes, after loading your response. What do you mean by adding items? You're not adding any new item.

M R Over a year ago

Right now im using postman to add data to the list. but i will create a function to add stuf to the list. i want it to auto render so i can see the items without refreshing the page.

Navid Zarepak Over a year ago

You can set the dataLoaded back to false when you add a new item and then your usEffect function will be triggered and then it loads the data again causing a re-render.

|

Collectives™ on Stack Overflow

React Hooks infinite loop Memory leak?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related