The useEffect Causes a infinity loop

Question

I'm a bit new in react hooks and effects and I'm having trouble in using useEffect

useEffect( _ => {
(async _ => {
  const res = await axios.get('/api/laf/getreportlostitem');
  getReports(res.data);
  setLoading(false);
})();},[reports]);

The code above is a useEffect I build to get all the data in the database using axios, and the I put all the data in a state called reports.

// Data State for getting the reports 
const [reports, getReports] = useState([]);

but when I console.log the reports, it causes an infinity loop. I dont know why?

Let me show you a brief actions I made.

I'm doing a button that when it has been clicked, the status of the report by its id will be updated.

  <Button onClick={ _ => setAsFound(row.id)} variant="contained" color="primary">Set as found</Button>
                        |
<ClaimedButton onClick={ _ => setAsClaimed(row.id)} variant="contained" color="primary">
                        Set as claimed
                        </ClaimedButton>

This is a sample draft of what is the structure of the reports in the state.

{ name, src, yr, campus, department, course, details, contact, status }

As you can see, there's a "status" data in the object. So when I click one of the buttons, the data in the reports state will be updated. Here is the onclick functions of the buttons.

const setAsFound = id => {

  if(window.confirm("Are you sure this report item is now found?") ){
     const updateStatusFound = {
        status: foundData
      };

      props.setReportToFound(id, updateStatusFound);
  }

};

const setAsClaimed = id => {

  if(window.confirm("Are you sure this report item is now claimed?")){
    const updateStatusClaimed = {
      status: claimedData
    };

    props.setReportToClaimed(id, updateStatusClaimed);
  }

};

The founData and claimedData value is this.

const [foundData, setFoundData] = useState('Found, Not Claimed');


const [claimedData, setClaimedData] = useState('Found and Claimed');

This are just values of state that will be sent in the database once the action is complete.

The other codes is just the actions and functions I've working on. But my main concern is why does the reports state causes an infinite loop even the data just rendered in the component? I even have a dependency so that when the datas are updated, the reports state will be updated and it will re render the data. I've tried not including the reports as a dependency. But the problem is that when I remove it, the data does not update. Any ideas how I can stop the infinity loop?

score 0 · Answer 1 · answered May 11 '20 at 15:44

0

You are passing reports as a dependency to the useEffect hook, that means every time the state variable reports changes, useEffect will be triggered again. If you want to simulate componentDidMount and query the data just one time you don't have to pass any dependency to useEffect.

answered May 11 '20 at 15:44

Mauricio Avendaño

801
9
15

But if I remove the dependency, the data will not rerender again. i need it so that the data in reports state is updated and renders immediately in the UI after a use Clicks the action buttons. – Gab Agoncillo May 11 '20 at 15:49
Do you noticed that you are not using reports in useEffect? Have you tried just this ? useEffect( _ => { (async _ => { const res = await axios.get('/api/laf/getreportlostitem'); getReports(res.data); setLoading(false); })();}[]); – Mauricio Avendaño May 11 '20 at 16:00
I am using reports, please see the 1st block of code in my post. I've also try that. But like I said, it doesn't render the updated data immediately and that's bad if the user see that the data doesn't update immediately. When I added the reports state in the dependency of useEffect, it does renders immediately but causes infinity loop when I console.log the reports state. – Gab Agoncillo May 11 '20 at 16:08

score 0 · Accepted Answer · answered May 12 '20 at 06:22

0

I fix my issue.

I restructured my useEffect on how it will update the values immediately and not cause an infinite loop.

I've found my answer here.

Why is the cleanup function from `useEffect` called on every render?

answered May 12 '20 at 06:22

Gab Agoncillo

77
1
9

The useEffect Causes a infinity loop

2 Answers2