`useEffect`에서 `setState` 경고가 뜰 때

흐름

Supabase로 앨범 목록을 불러오는 Home 페이지를 만들다가, useEffect 안에서 void loadAlbums()만 호출했더니 ESLint가 에러를 표시했다.

어떤 에러인가?

대략 이런 메시지다.

Calling setState synchronously within an effect can trigger cascading renders

이 메시지는 이펙트 본문에서 곧바로 상태를 바꾸는 호출이 이어지면, 렌더가 한 번에 여러 번 이어질 수 있어서 지양하라는 React / react-hooks 쪽 권장 규칙이다.
loadAlbums 같은 함수 안에 setAlbums, setLoadError가 있으면, 린터가 그 호출을 “이펙트 → 상태 갱신”으로 묶어서 잡는 경우가 있다.

해결 방법

1. 데이터만 가져오는 함수는 setState 없이 순수하게 둔다.
2. 상태 반영은 useCallback으로 만든 함수 한 곳에서만 한다.
3. useEffect에서는 Promise가 끝난 뒤에만 apply를 호출한다.
4. 모달에서 목록만 다시 불러올 때는 같은 fetch + apply 패턴을 추상화 함수로 재사용한다.

요약

이펙트가 직접 setState 들어 있는 함수를 부르는 것은 지양하고, fetch와 상태 업데이트를 나누자.