React warning maximum update depth exceeded when update state inside useEffect

Question

I am trying to update my state Variable which is an Object with boolean variables inside it, I am updating my state inside useEffect once the data (an api call response which I am fetching based on button click) is available. This data is then used to call my another component which is a Modal, incase of no data availability I will be showing another Modal. When I close the Popup I should update the state variable.

  const [modalState,setModalState] =
    useState<IModalState>({
      showNoUsersModal: false,
      showModal: false,
    });


  useEffect(() => {
    if (data && data.length > 0 ) {
      setModalState({
        ...modalState,
        showModal: true,
        showNoUsersModal: false,
      });
    } else if (data && data.length == 0) {
      setModalState({
        ...modalState,
        showModal: false,
        showNoUsersModal: true,
      });
    }
  });

const onApplicationSuccess=()=>{
setModalState({
        ...modalState,
        showModal: false,
        showNoUsersModal: false,
      });
}

const onClose=()=>{
setModalState({
        ...modalState,
        showModal: false,
        showNoUsersModal: false,
      });
}
return (
<div>
{modalState.showNoUsersModal && (
        <NoUsersFoundModal
          onCancel={() =>
            setModalState({
              ...modalState,
              showModal: false,
              showNoUsersModal: false,
            })
          }
        />
      )}

{modalState.showModal && (
        <SomeOtherModal
          onCancel={() =>
            setModalState({
              ...modalState,
              showModal: false,
              showNoUsersModal: false,
            })
          }
        />
      )}
</div>
)

No dependency array on your `useEffect` = run at each render, and because you're updating the state in the `useEffect`(which triggers a rerender) > infinite loop — dbuchet, Feb 06 '23 at 12:42

score 0 · Answer 1 · answered Feb 06 '23 at 12:48

0

this issue was because you didn't pass any dependency array to useEffect so when ever state was changing useEffect was calling again. here is the solution .

useEffect(() => {
    if (data && data.length > 0 ) {
      setModalState({
        ...modalState,
        showModal: true,
        showNoUsersModal: false,
      });
    } else if (data && data.length == 0) {
      setModalState({
        ...modalState,
        showModal: false,
        showNoUsersModal: true,
      });
    }
  },[]);

answered Feb 06 '23 at 12:48

Engr.Aftab Ufaq

3,356
3
21
47

I have tried this, but the problem is when i close the Modal/Popup which Is getting triggered based on setModalState, and when i try to trigger the popup again the modal doesn't show up, i have to refresh the page in order to load the popup again. Note: When i am closing the popup i am calling the onCancel() method which i have mentioned in the code snippet – Magnanamous Feb 06 '23 at 13:18

score 0 · Answer 2 · answered Feb 06 '23 at 13:12

0

You should pass dependency array to useEffect or it will get call every time your component re-renders.

And you are updating a state inside useEffect which it cause your component to re-render , so your application will stuck in a loop and calls the callback in useEffect every moment.

Base on what you described about your goal, following code must solve your problem :

useEffect(() => {
    if (data && data.length > 0 ) {
      setModalState({
        ...modalState,
        showModal: true,
        showNoUsersModal: false,
      });
    } else if (data && data.length == 0) {
      setModalState({
        ...modalState,
        showModal: false,
        showNoUsersModal: true,
      });
    }
  },[data]);

answered Feb 06 '23 at 13:12

Amir Pasha Bagheri

46
5

I have tried this, but the problem is when i close the Modal/Popup which Is getting triggered based on setModalState, and when i try to trigger the popup again the modal doesn't show up, i have to refresh the page in order to load the popup again. Note: When i am closing the popup i am calling the onCancel() method which i have mentioned in the code snippet – Magnanamous Feb 06 '23 at 13:18
Make sure you have passed the data in dependency array , and check your conditions for triggering the right value in useEffect – Amir Pasha Bagheri Feb 06 '23 at 13:23
I have passed the data, problem is once i close the popup and set my variable of the state to false, I am not able to retrigger the popup I am changing my state variable on cancel, i believe that is the issue, but not sure where i am going wrong. – Magnanamous Feb 06 '23 at 13:28
how do you retrigger your modal ? with the useEffect ? or there is another function for opening it ? because I cannot see any other function for opening the modal. – Amir Pasha Bagheri Feb 06 '23 at 13:32
I updated my code with return statement of the component, can you give it a look – Magnanamous Feb 06 '23 at 13:41
Your return statement looks fine to me , the problem is that your state is not updating properly , I think your data variable is not changing so your useEffect callback is not updating your state vaule. – Amir Pasha Bagheri Feb 06 '23 at 13:47

React warning maximum update depth exceeded when update state inside useEffect

2 Answers2