흔한 함정: 오래된 클로저와 누락된 의존성

목표: 흔히 발생하는 두 가지 문제인 오래된 클로저(이펙트가 오래된 값을 봄)와 의존성 누락(필요한 시점에 이펙트가 다시 실행되지 않음)을 찾아 수정합니다.

오래된 클로저는 함수(타이머 또는 리스너)가 이전 렌더링의 오래된 값을 캡처할 때 발생합니다.

• 이펙트가 최신 상태를 보지 못함
• 타이머가 잘못된 값을 증가시킴

이 인터벌은 오래된 count를 캡처합니다. 이펙트의 의존성 목록이 비어 있어서 업데이트를 전혀 보지 못합니다.

간단한 방법은 두 가지입니다:

• 의존성 추가: 이펙트가 최신 값으로 다시 실행되도록 합니다.
• 함수형 업데이트: setCount(c => c + 1)는 타이머와 리스너 안에서 최신 상태를 읽습니다.

함수형 업데이트를 사용하면 콜백이 항상 최신 값을 받습니다. 타이머를 해제할 수 있도록 정리는 유지합니다.

의존성 누락으로 인해 이펙트가 업데이트를 건너뛸 수 있습니다. 확인 목록:

• 내부에서 사용하는 모든 반응형 값을 나열합니다.
• 설정 함수에는 함수형 업데이트를 우선 사용합니다.
• 안정적인 콜백은 필요한 경우 이펙트 안에서 정의하거나 메모이제이션합니다.

복습: 오래된 클로저는 콜백이 오래된 값을 캡처할 때 발생합니다. 올바른 의존성을 추가하거나 함수형 업데이트를 사용해 수정합니다. 타이머와 리스너의 정리도 유지합니다.