React Hooks의 Stale Closure 해결하기

React의 useEffect 훅에서 타이머를 구현한다고 가정해 봅시다. 5초마다 문서를 자동으로 저장하고 싶습니다. 타이머는 작동하지만, 빈 문서를 저장합니다. 사용자는 10개의 문단을 입력했지만, 타이머는 아무것도 감지하지 못합니다.

이것이 바로 stale closure입니다.

useEffect 훅은 첫 번째 렌더링 시점의 변수들을 캡처합니다. 만약 의존성 배열(dependency array)에서 state를 제외하면, 타이머는 과거의 상태에 머물게 됩니다. 즉, 데이터의 이전 버전을 사용하게 됩니다.

만약 state를 의존성 배열에 추가하면, 사용자가 글자를 입력할 때마다 타이머가 초기화됩니다. 이는 성능을 저하시키고 타이밍 로직을 망가뜨립니다.

이 문제는 Mutable Ref 패턴으로 해결할 수 있습니다.

useRef 훅을 사용하여 최신 state를 유지하세요. 이렇게 하면 새로운 렌더링을 트리거하거나 인터벌을 초기화하지 않고도 타이머가 최신 데이터에 접근할 수 있습니다.

다음 단계를 따르세요:

이 접근 방식은 타이머와 데이터를 분리합니다. 백그라운드 작업은 안정적으로 유지되고, 데이터는 정확하게 유지됩니다.

조용한 버그 때문에 사용자 데이터를 잃는 일을 멈추세요. ref를 사용하여 비동기 작업이 UI와 동기화되도록 유지하세요.

출처: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7