kunstenkamp/.agents/skills/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

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