📚 Reference

📜 Chapter

Closure

stale closure

• stale closure
• 낡은 클로저
• Stale Closure는 함수가 선언될 당시의 환경(변수 값 등)을 기억하고 있어, 나중에 실행될 때 최신 값이 아닌 과거의 값을 참조하는 현상이다.
• closure는 값이 아니라 시점(snapshot)을 기억한다.

원인

• React의 useEffect나 useCallback 내부에 의존성 배열([])을 잘못 설정하면, 비동기 작업이 끝난 시점의 최신 State가 아닌, 함수가 생성될 시점의 State를 바라보게 된다.

문제점

• 사용자가 검색어를 빠르게 입력할 때, 이전 입력값에 대한 비동기 로직이 완료되면서 현재 화면의 상태를 엉뚱하게 덮어쓸 수 있다.