React: 개별 이벤트 내부에 상태를 설정하면 정리가 실행됩니까?

문제는 타이머 자체가 개별 이벤트가 아니라는 것입니다. 이산 이벤트는 다른 이산 이벤트와 관련해서 만 보장됩니다. 나는 그것이 당신이 여기서 원하는 것이라고 생각하지 않습니다.

타이머 중지는 모든 설정 상태가 비동기이므로 비동기 작업입니다. 따라서 플러시되기 전에 다른 것이 들어올 수 있습니다.

이것은 useLayoutEffect가 실제로 문제를 완전히 해결하지 못하는 경우입니다. 확실히 동시 모드는 아니지만 이것은 동기화 모드에서도 개략적입니다. 타이머가 아니었지만 포커스 이벤트라고하자면 플러시되기 전에 일괄 처리 내에서 실행될 수 있으며 동일한 문제가 발생합니다.

setRunning(false); // I would like to add a stop of this timer to the queue to be performed later
setLapse(0); // I would like to add an operation to set lapse to zero later
// lots of random stuff that can happen before the batch flushes
// This might also queue an operation to set lapse to something else
// actual rendering
// If concurrent mode, lots of other random stuff that can happen while rendering
// This might also queue an operation to set lapse to something else
// Actually do all that work in order

대기열에 추가되는 순서에 관한 것입니다.

한 가지 방법은 타이머가 실제로 중지 된 경우에만 재설정을 전달하는 것입니다. 동일한 프레임에서 항상 0을 표시하려면 running이 false 일 때 항상 0을 표시 할 수 있습니다.

그러나 거의 항상 그렇듯이 감속기로 모델링하는 것이 더 좋습니다. 감속기는 중지 상태라고 생각할 때 쉽게 업데이트를 거부 할 수 있으며 실제로 재설정하는 논리를 수행 할 수도 있습니다.

이제 이해가된다. 감사.

https://mobile.twitter.com/dan_abramov/status/1104069236132057089
https://codesandbox.io/s/23m1659rlp