skillhub-088-vercel-react-best-practices/rules/advanced-init-once.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Initialize App Once, Not Per Mount	LOW-MEDIUM	avoids duplicate init in development	initialization, useEffect, app-startup, side-effects

初始化应用只执行一次，而非每次挂载都执行

请勿将每次应用加载只需执行一次的全局初始化逻辑放在组件的 useEffect([]) 内部。组件可能被重新挂载，导致副作用重新执行。应改用模块级守卫变量或在入口模块中进行顶层初始化。

错误做法（开发环境执行两次，重新挂载时再次执行）：

function Comp() {
  useEffect(() => {
    loadFromStorage()
    checkAuthToken()
  }, [])

  // ...
}

正确做法（每次应用加载只执行一次）：

let didInit = false

function Comp() {
  useEffect(() => {
    if (didInit) return
    didInit = true
    loadFromStorage()
    checkAuthToken()
  }, [])

  // ...
}

参考文档：Initializing the application