React中条件设置setTimeout时，合理的默认值是什么？

问题背景 #

setTimeout会返回数字类型的timeoutId，clearTimeout通过该ID识别并移除定时器。在React环境中，清除定时器是公认的最佳实践，但遇到条件性设置定时器的场景时，会有两个疑问：

• 如果要给定时器变量设置默认值，应该用什么值？0是安全的ID吗？
• 是不是直接用条件包裹整个定时器逻辑、完全避免默认值的写法更好？

代码示例1（带默认值的写法） #

useEffect(() => {
  const timeout = success ? setTimeout(() => foo(), 300) : defaultVal;

  return () => clearTimeout(timeout);
}, [success]);

代码示例2（条件包裹的写法） #

useEffect(() => {
  if (success) {
    const timeout = setTimeout(() => foo(), 300);
    return () => clearTimeout(timeout);
  }
}, [success]);

解答 #

关于默认值的安全性 #

先明确：clearTimeout的规范允许传入无效的ID（比如0、null、undefined），遇到这类值时它会直接忽略，不会抛出错误。

至于0是不是安全的ID？目前主流浏览器中，setTimeout返回的ID都是从1开始递增的（不同浏览器实现可能有差异，但绝不会是0），所以clearTimeout(0)不会清除任何已存在的定时器，确实是安全的。同理，用null或undefined作为默认值也没问题，效果和0一致。

两种写法的优劣对比 #

优先推荐示例2的写法，理由如下：

• 逻辑更清晰：只有当success为true时才创建定时器，同时返回对应的清理函数；当success为false时，useEffect没有返回清理函数，这完全符合逻辑——因为本来就没创建定时器，自然不需要清理。
• 避免不必要的冗余：示例1的写法多了一次不必要的变量赋值，虽然不影响功能，但可读性不如示例2直接。
• 符合React useEffect的设计习惯：useEffect的清理函数本来就是用来清理当前effect中创建的资源，用条件判断精准控制资源的创建与清理，更贴合React的最佳实践。

内容的提问来源于stack exchange，提问作者Electric Coffee