Skip to main content

Advanced Init Once

Source: .agents/references/coding-standard/vercel-react-best-practices/rules/advanced-init-once.md

Metadata​

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

Content​

Initialize App Once, Not Per Mount​

Do not put app-wide initialization that must run once per app load inside useEffect([]) of a component. Components can remount and effects will re-run. Use a module-level guard or top-level init in the entry module instead.

Incorrect (runs twice in dev, re-runs on remount):

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

  // ...
}

Correct (once per app load):

let didInit = false

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

  // ...
}

Reference: Initializing the application