DEPS · CLEANUP

useEffect deps 변경 시 teardown 순서

React는 의존성 배열의 이전 값과 현재 값을 비교하고, 변경이 있으면 새 effect를 실행하기 전에 지난 cleanup을 먼저 호출합니다.

commit lifecycle Object.is deps 비교, 이전 cleanup, 새 effect, unmount cleanup을 하나의 teardown 계약으로 봅니다.

1 mount effect 첫 렌더 이후 타이머, 구독, 요청을 시작합니다.

2 deps compare deps 배열의 각 값을 Object.is로 비교합니다.

3 cleanup old 이전 effect가 연 구독, 요청, 타이머를 먼저 닫습니다.

4 run new effect 새 deps 스냅샷으로 외부 작업을 다시 시작합니다.

5 unmount cleanup 화면에서 사라질 때 마지막 effect도 닫습니다.

stale response 차단

request

stale 이전 요청이 늦게 끝나면 새 화면 상태를 오래된 응답으로 덮을 수 있습니다.

abort cleanup에서 AbortController를 호출하거나 최신 요청만 반영하도록 막습니다.

timer

duplicate 이전 timeout이나 interval이 남으면 중복 실행과 불필요한 상태 변경이 생깁니다.

clear cleanup에서 clearTimeout 또는 clearInterval로 이전 예약 작업을 취소합니다.