Callback may be stale when called

[vepasto]

This causes that stale callback may be called:

useEffect(() => {
	savedCallback.current = callback;
}, [callback]);

Easy fix is to just remove useEffect and assign callback immediately:

savedCallback.current = callback;

[johndiiorio]

Hello, thanks for opening an issue. I believe that the useEffect is necessary so that savedCallback is not updated until have the render occurs, as describe in this blog post.

Would it be possible for you to provide a CodeSandbox link that reproduces your issue?

[vepasto]

Hi, the blog post did not clarify me why it needs to have that useEffect there.

Here is CodeSandbox link https://codesandbox.io/s/react-typescript-playground-forked-09rdd?file=/src/index.tsx

In CodeSandbox wait for a while and then press stop button.
First Count and RealCount represents the current implementation and the second ones represents implementation without useEffect.

[johndiiorio]

Thanks for the CodeSandbox link. This is definitely an subtle bug. After playing around with your example, I could prevent the issue by making one of the following changes:

• Changing the setCount to be in the updater form of setState in intervalCallback
• Removing one of the two useInterval calls in Counter
• Increasing the interval delay
• Switching the current useInterval implementation to use a useLayoutEffect instead of a useEffect
• Setting the savedCallback ref directly in the render

While I'm not 100% sure, I think this has to do with the order of which React batches setState updates. Other useInterval implementations also seem to have this issue. I'm not sure if changing it so that the ref is updated in the render, or if changing the useEffect to a useLayoutEffect is better - there does seem to be a behavioral difference.

[vepasto]

• Changing the setCount to be in the updater form of setState in intervalCallback
• Removing one of the two useInterval calls in Counter
• Increasing the interval delay

The example code is just to emphasize the problem, not to represent any kind of real world application.

• Switching the current useInterval implementation to use a useLayoutEffect instead of a useEffect

I don't see point delaying value assign. I can't think of real life application where we would need to wait for DOM render before we assign the value.

• Setting the savedCallback ref directly in the render

In my opinion this would be the best solution