피드로 돌아가기
Dev.toFrontend
원문 읽기
useEffect 남용 제거를 통한 렌더링 최적화 및 훅 개수 7개에서 2개로 축소
Why I stopped using useEffect for everything and what I do instead
AI 요약
Context
모든 상태 동기화와 데이터 페칭에 useEffect를 적용하여 불필요한 리렌더링과 복잡한 의존성 체인이 발생하는 구조적 문제 직면. 렌더링 사이클과 Effect 실행 시점의 불일치로 인해 재현 어려운 버그와 유지보수 효율 저하 발생.
Technical Solution
- State-to-State 동기화 로직을 제거하고 렌더링 단계에서 직접 계산하는 Derived State 방식으로 전환하여 리렌더링 횟수 감소
- 단순 useEffect 기반 Fetching을 React Query로 대체하여 Loading/Error 상태 관리 및 Race Condition 해결
- Browser API 및 외부 라이브러리 동기화에만 useEffect 사용 범위를 제한하여 React 외부 시스템과의 연결 지점 명확화
- 외부 동기화 로직을 Custom Hook으로 격리하여 컴포넌트의 비즈니스 로직과 인프라 동기화 로직의 관심사 분리
- 연산 비용이 높은 로직에 한해 Profiling 기반의 useMemo를 적용하여 불필요한 재계산 방지
Impact
단일 컴포넌트 내 useEffect 호출 횟수를 7개에서 2개로 71% 감소시켜 코드 복잡도 및 렌더링 오버헤드 개선
실천 포인트
- useEffect 작성 전 'React 외부 시스템과 동기화하는 작업인가'를 먼저 자문 - 상태 기반의 파생 값은 useState + useEffect 대신 변수 선언을 통한 Derived State로 처리 - API 호출 시 Loading, Error, Cancellation, Caching 처리를 위해 React Query/SWR 도입 검토 - Event Listener 등록 시 반드시 Cleanup 함수를 통해 메모리 누수 및 중복 등록 방지