React项目运行时console.log重复执行两次是什么原因？

• 最常见原因：React 18+ 开发环境下的严格模式（StrictMode）触发
  React 18 为了帮助开发者检测不符合规范的副作用逻辑，在开发环境的严格模式下，会对每个组件执行「挂载 -> 卸载 -> 重新挂载」的流程，组件函数会因此执行两次，直接写在组件顶层的console.log自然会打印两次。该行为仅存在于开发环境，生产环境构建后会自动消失，不属于代码bug。
• 自定义Hook状态更新触发多次重渲染
  你的代码中使用了自定义Hook useResults，如果该Hook内部存在多次状态更新操作，就会触发SearchScreen组件多次重渲染：
  比如useResults内部的搜索逻辑中，先更新了错误提示状态、请求完成后再更新搜索结果状态，两次独立的状态更新就会触发两次组件重渲染，对应两次console.log输出。
• 父组件重渲染带动子组件重复渲染
  如果SearchScreen的父组件存在两次重渲染行为，且没有对SearchScreen做memo优化，也会导致SearchScreen跟着重渲染两次。

1. 先排查严格模式
   找到项目入口文件（通常是index.js/App.js），查看SearchScreen是否被包裹在<React.StrictMode>标签内。临时移除StrictMode后重启项目，如果打印次数变为1次，即可确认是严格模式的正常行为，无需额外修改代码，开发环境保留严格模式更利于提前发现潜在问题。
2. 排查自定义Hook逻辑
   检查useResults的代码，确认是否存在连续的状态更新。如果是React 18之前的版本，异步回调中的状态更新不会自动批量处理，可以将多次状态更新合并为单个对象更新，或者使用批量更新API减少重渲染次数。
3. 额外优化建议
   你当前的代码直接读取results[0].name，如果results为空数组时会抛出「无法读取undefined的name属性」的错误，建议增加非空判断：results.length > 0 && console.log(results[0].name)。

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