react-advanced-patterns

React Advanced Patterns

Advanced patterns for specific cases requiring careful implementation.

1. Initialize App Once, Not Per Mount

Impact: LOW-MEDIUM - Avoids duplicate initialization in development

Don't put app-wide initialization inside useEffect([]). Components can remount (especially in React StrictMode), causing effects to re-run. Use a module-level guard instead.

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

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

  return <MainContent />
}

Correct: once per app load

let didInit = false

function App() {
  useEffect(() => {
    if (didInit) return
    didInit = true

    loadFromStorage()
    checkAuthToken()
    initializeAnalytics()
  }, [])

  return <MainContent />
}

Alternative: initialize outside component

// Initialize at module level (runs once when module loads)
loadFromStorage()
checkAuthToken()
initializeAnalytics()

function App() {
  return <MainContent />
}

Alternative: use a dedicated initialization module

// init.ts
let initialized = false

export function initApp() {
  if (initialized) return
  initialized = true

  loadFromStorage()
  checkAuthToken()
  initializeAnalytics()
}

// App.tsx
import { initApp } from './init'

initApp() // Called once at module load

function App() {
  return <MainContent />
}

Reference: Initializing the application

---

2. Store Event Handlers in Refs

Impact: LOW - Stable subscriptions

Store callbacks in refs when used in effects that shouldn't re-subscribe on callback changes.

Incorrect: re-subscribes on every render

function useWindowEvent(event: string, handler: (e: Event) => void) {
  useEffect(() => {
    window.addEventListener(event, handler)
    return () => window.removeEventListener(event, handler)
  }, [event, handler]) // handler changes every render
}