기준 확인
effect가 없으면 외부 시스템과 맞출 수 없는 일인지 먼저 묻는다.
의존성 선언
effect 내부에서 읽는 props와 state를 dependency에 반영한다.
실행
렌더 결과가 화면에 반영된 뒤 외부 작업을 수행한다.
useEffect의 외부 동기화 경계 정리
다음 실행 전이나 언마운트 때 이전 구독과 요청을 정리한다.
fetch
데이터 요청
id나 query 변경에 맞춰 요청을 다시 수행
취소 또는 최신성 확인 필요
subscription
외부 이벤트
websocket, media query, storage event 구독
cleanup 필수
timer
반복 작업
setInterval과 timeout을 시작하고 해제
stale closure 한계
derived
잘못된 effect
props에서 계산 가능한 값을 state로 복사
렌더 중 계산이 낫다