My-Weekly-ToDo-List/.opencode/skills/web-design-guidelines/react-best-practices/rules/advanced-init-once.md
mARTin d92a8c7210 feat: add task actions (notes/delete) and refine animation logic
- Added 'onDelete' and 'onNotes' support to TaskItem.
- Implemented hover actions (Delete and Notes icons) for tasks.
- Added Notes Modal for editing task markdown content.
- Simplified navigation animation to remove blank flash (single-phase slide-in).
- Fixed syntax error in updateTask function.
- Updated styles for modal and task actions.
2026-02-01 12:25:53 +01:00

958 B

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