[React] 오늘의 에러 - Too many re-renders. React limits the number of renders to prevent an infinite loop.

 

 

---

에러 화면

 

const getGroups = useCallback(async () => {
    const user_email = localStorage.getItem("email");
    await api
      .get(`/${user_email}/groups`, {
        headers: {
          access_token: localStorage.getItem("jwt_accessToken"),
        },
      })
      .then((response) => {
        console.log(response);
        setGroups([]);
        setGroups(response.data.groups);
        groups.forEach((v) => {
          groupName.push(v["group_name"]);
        });
        setGroupNames([]);
        setGroupNames(groupName);
      })

     .catch((err) => console.log(err));

  }, [groupNames]);

에러 난 부분 코드

 

 

 

 

 

  groups.forEach((v) => {
          groupName.push(v["group_name"]);
        });
        setGroupNames([]);
        setGroupNames(groupName);

 

이 부분을 getGroups 함수 밖으로 뺐더니 groupNames가 변화하고, 그 결과 useCallback으로 감싼 함수가 다시 실행되다 보니

무한 루프가 발생하였다. 

 

해결 방법

무한 루프가 돌지 않게 저 부분을 useCallback함수 안으로 삽입하여 해결하였다.