Parent : [[INDEX-DEV-GENERAL]]

React/TS — erreurs qui reviennent en 5 jours

Problème

Les mêmes bugs réapparaissent projet après projet : state périmé, effects en boucle, any, pas de error boundary.

Solution — Checklist code review

1. Stale closure (autosave, timers, websockets)

// ❌ blocks figé au moment du callback
useCallback(async () => { await save(blocks) }, [])

// ✅ store.getState() ou ref
useCallback(async () => {
  const { blocks } = useStore.getState()
  await save(blocks)
}, [])

Voir PAT-136.

2. useEffect dependencies

// ❌ fetch sans abort → race + memory leak
useEffect(() => { fetchData(id).then(setData) }, [id])

// ✅ AbortController
useEffect(() => {
  const ac = new AbortController()
  fetchData(id, ac.signal).then(setData).catch(() => {})
  return () => ac.abort()
}, [id])

3. Event listeners document/window

Toujours removeEventListener / return () => cleanup dans useEffect.

4. Types — interdits en prod

• any sans commentaire // eslint-disable justifié
• @ts-ignore → préférer @ts-expect-error + raison
• Props optionnelles sans default → undefined bugs

5. Error boundary (pages/features)

Au minimum une boundary par route feature — pas d'écran blanc.

6. Keys React

• Liste : key={item.id} stable — jamais key={index} si ordre change
• Annotations : UUID v4

Scanner rapide

rg "useEffect\(\(\) =>" --glob "*.tsx"  # review manuelle deps
rg ": any" --glob "*.{ts,tsx}"
rg "@ts-ignore" --glob "*.{ts,tsx}"

Source

• Consolidation retours multi-projets — 2026-06-09

Liens connexes

• [[KNOW-PAT-136-ProjectBeta-editor-ux-patterns|KNOW-PAT-136]]