stale closure 문제

3번 빠르게 클릭해도 count가 1만 증가합니다. 버그를 찾으세요:

JSX

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+1 (1초 후)</button>
    </div>
  );
}

답변

setTimeout은 React에서 사용할 수 없음 1초 지연이 있으면 state가 업데이트되지 않음 setCount에 산술 연산을 직접 쓰면 안 됨 setTimeout 콜백이 클릭 시점의 count를 캡처하여 stale closure 발생

로그인 후 제출하기