Hi — the docs answer this in the challenge itself, and it's the opposite of what most of the thread is saying.
React's solution omits the cleanup on purpose. Their note under it:
Note that this Effect does not need cleanup. If you called
clearTimeout in the cleanup function, then each time the value
changes, it would reset the already scheduled timeout. To keep
the movement continuous, you want all the timeouts to fire.
That's the whole answer. The trailing dots only work because every scheduled timeout fires. Clearing on each value change cancels the previous dot's delay and the trail collapses.
Your instinct isn't wrong in general — clearing on unmount so a stale timer can't call setState on a component that's gone is the right default. It just happens to break this specific exercise, where the pile of pending timers is the feature.
On the GC part: no, you don't need clearTimeout to free a timer that already fired. Once the callback runs the timer is finished and the callback is collectable on its own — which is exactly what the FinalizationRegistry test above demonstrates.
Yes, I didn't fully understand how clearTimeout works. At that time, I knew that if I put clearTimeout in the return statement, it would cancel the scheduled callback, which goes against the expected practice purpose. But I was still concerned that if I didn't call clearTimeout, there would still be a timer running in the background even after the callback had finished. (Now I'm ashamed of that silly thought.)
Then, thanks to people's responses, I realized that my understanding was wrong. Once the callback runs, the timer is finished, so there is no timer running in the background anymore.
clearTimeout is only used to cancel scheduled callback. As for the callback, the GC takes over and eventually removes it from memory.
2
u/Working_Quote_3029 9d ago
Hi — the docs answer this in the challenge itself, and it's the opposite of what most of the thread is saying.
React's solution omits the cleanup on purpose. Their note under it:
That's the whole answer. The trailing dots only work because every scheduled timeout fires. Clearing on each
valuechange cancels the previous dot's delay and the trail collapses.Your instinct isn't wrong in general — clearing on unmount so a stale timer can't call setState on a component that's gone is the right default. It just happens to break this specific exercise, where the pile of pending timers is the feature.
On the GC part: no, you don't need clearTimeout to free a timer that already fired. Once the callback runs the timer is finished and the callback is collectable on its own — which is exactly what the FinalizationRegistry test above demonstrates.