React useEffect 안의 setInterval이 state 최신값을 못 읽습니다 (stale closure)

Question

카운트다운 훅을 만들고 있는데, setInterval 안에서 찍는 count 값이 항상 0만 찍힙니다.
function useCountdown() {
  const [count, setCount] = useState(0);

useEffect(() => {
    const id = setInterval(() => {
      console.log(count); // 항상 0
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(

김영삼 · Accepted Answer

전형적인 stale closure입니다. effect가 처음 실행될 때 캡처된 count=0가 interval 콜백 안에 박혀버리는 구조예요.
패턴 ①: useRef로 최신값 미러링
deps를 비운 채 최신값만 읽고 싶을 때 쓰는 공식 패턴에 가깝습니다.
function useCountdown() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

useEffect(() => { countRef.current = count; }, [count]);

useEffect(() => {
    const id = setInterval(() => {
      console.log(countRef.current); // 최신값
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }

프론트수진 · Answer

저도 이 버그 몇 번 겪고 나서는 "interval/subscription/eventListener 안에서 state 읽어야 하면 일단 ref 미러링" 규칙으로 갔어요. React 공식 문서 "Separating Events from Effects" 챕터에 useEffectEvent 얘기도 있는데 아직 experimental이라 프로덕션에서는 useRef 쪽이 안전합니다.

코딩하는민수 · Answer

useRef 미러링 패턴으로 해결됐습니다. setCount가 왜 됐는지도 이해가 명확해졌어요. 감사합니다!

댓글 0