react runtime_error ai_generated partial

警告：组件在开发环境中渲染两次。useEffect 清理在挂载后立即运行。API 在组件挂载时被调用两次。

Warning: Component renders twice in development. useEffect cleanup runs immediately after mount. API called twice on component mount.

ID: react/strict-mode-double-invoke-effect

其他格式: JSON · Markdown 中文 · English
75%修复率
82%置信度
1证据数
2023-05-20首次发现

版本兼容性

版本状态引入弃用备注
[email protected] active — — —
[email protected] active — — —

根因分析

开发环境中的 React StrictMode 会故意双重调用副作用以检测副作用错误，导致清理在挂载后立即运行，并且副作用触发两次。

English

React StrictMode in development intentionally double-invokes effects to detect side-effect bugs, causing cleanup to run immediately after mount and effects to fire twice.

generic

官方文档

https://react.dev/reference/react/StrictMode

解决方案

  1. Ensure useEffect has a proper cleanup function that cancels the API call or subscription. This makes the double invocation harmless.
  2. Use useRef to track if the effect has already run and skip the second invocation if needed (only for specific cases like analytics).

无效尝试

常见但无效的做法:

  1. Removing StrictMode wrapper entirely to stop double invocations 60% 失败

    StrictMode is a development tool; removing it hides the bug but doesn't fix it. The same bug may cause issues in production if effects have improper cleanup.

  2. Adding a flag to prevent the second API call (e.g., if (called) return) 75% 失败

    This masks the StrictMode behavior but may break cleanup logic or cause stale data if the flag is not reset properly.

  3. Ignoring the double call as a development-only issue 50% 失败

    If the effect has side effects like subscriptions or analytics, the double call can cause production-like bugs that are hard to debug.