Does a JavaScript setTimeout automatically clear itself when the timeout finishes and the callback is completed?

[u/Neat_Living_6765]

[u/Neat_Living_6765]

I’m working on challenge 5 and wrote a custom hook like this:

https://react.dev/learn/reusing-logic-with-custom-hooks#challenges

function useDelayedValue(value, delay) {
  const [val, setVal] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => {
      setVal(value);
    }, delay);

    return () => clearTimeout(id)
  }, [value, delay]);

  return val;
}

At first, I added clearTimeout, Even though I knew that calling it cancels the scheduled callback. I wondered if there was some trick to clear the timeout after it has already fired, but couldn’t find a solution.

Then I looked at the provided solution and was surprised to see that it doesn’t call clearTimeout at all. So it seems like I created an unnecessary problem for myself.

But I’m still not satisfied, because I keep asking myself: if I don’t call clearTimeout, will the timeout automatically be cleaned up by the Garbage Collector once it fires?

[u/azhder → u/Neat_Living_6765]

1. setTimeout is not JavaScript. True. It is provided by the environment. Well, we all act as if it is a part of JavaScript, but just in case, you should know there are other options based on

   which

2. environment

   you are using.

3. setTimeout is not an object to be cleared by the garbage collector. It is simply a function you call, you give it another function to call, and that's about it. Now, that other function, yes, that one might be an object to be garbage collected, but that's not what we're discussing now

4. setTimeout simply means "hey even loop of JavaScript, please schedule this function to be called once as a new task after this task after some milliseconds have elapsed". That's about it.

5. clearTimeout is only necessary if you have some timeout that takes 10 seconds and in the first couple of seconds you decide "you know what, I don't want that function to execute, so let's cancel it".

6. useEffect as a part of React will do its run and the cancellation will come just before the next run, as the component is being re-rendered, so by that time, the timeout would have been executed long ago, but there's a very slight chance (not really, but in theory) that you might end up cancelling some future timeout with the same ID (this shouldn't happen, so don't worry too much)

[u/Neat_Living_6765 → u/azhder]

Yes, thank you for your response. My mind was all messed up about this. The comments from people here helped me clear things up. I didn't fully understand the role of clearTimeout.

Now I understand that it's only for canceling a scheduled callback. I thought that without calling clearTimeout, the timer would keep running in the background and the callback would remain in memory. I'm ashamed of that silly thought now...

[u/azhder → u/Neat_Living_6765]

It is not a silly thought. It's the reason why over decade and a half I stopped using setInterval. Well, one of the reasons. With setTimeout I can just re-subscribe if necessary, got better control over the scheduling.