React组件生成唯一ID时出现返回值不符合预期的异常问题

这个问题是React 18+ 开发环境下的**严格模式（StrictMode）**特性导致的，核心逻辑如下：

• React 18 之后的严格模式在开发环境会对所有组件执行「挂载→立即卸载→重新挂载」的额外流程，目的是提前检测组件的副作用泄漏、状态重置异常等问题。
• 你代码中的lastId是定义在组件外部的模块级全局变量，它的生命周期和整个JS模块绑定，不会随着组件卸载被重置。
• 第一次组件挂载时调用getId，lastId从0累加为1，返回1；第二次重新挂载时再次调用getId，lastId从1累加为2，返回2。

大部分浏览器的控制台默认开启了「相似日志自动合并」功能，两次完全相同的incrementing打印会被合并为一条，旁边会标注出现次数（通常是一个小数字2）。你可以在控制台设置中关闭日志合并功能，就能看到两条独立的打印记录。

• 无需额外处理：该问题仅存在于开发环境，生产环境下严格模式不会触发重复挂载逻辑，id会按照预期从1开始正常累加。
• 优先使用原生API：React 18 已经内置了useId()钩子，专门用于生成组件唯一ID，原生支持服务端渲染，也不会出现重复冲突问题，直接替换你的自定义逻辑即可：

import { useId } from 'react'

export default function App() {
  const id = useId()
  return <div>{id}</div>
}

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