timeout 언마운트 에러

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

function WrapComponent() {
  const [step, setStep] = useState<1 | 2>(1)

  if (step === 1) return <AComponent nextStep={() => setStep(2)} />
  if (step === 2) return <BComponent />
}

AComponent에서 props로 전달 받은 WrapComponent의 setState를 실행하자 해당 에러가 나왔다.
원인을 헛다리 짚는바람에 찾느라 오래걸렸다.

결론적으로 원인은 setTimeout를 걸어놨던게 문제였다.
컴포넌트가 언마운트 되고나서 setTimerout이 동작하고 Acomponent의 state를 바꾸려한게 원인!

useEffect(() => {
  ...
  
  return () => {
    clearTimeout(limitTimer.current)
  }
}, [])

이렇게 언마운트됬을 때를 추가 하고 나니까 해결!