react-hooks-antipatterns-skill

What I do

I detect and fix anti-patterns specific to React hooks that cause production incidents:

1. State & Ref Pitfalls: Stale derived state, StrictMode double-execution, stale ref accumulators
2. Dependency Trap Anti-Patterns: useCallback/useMemo dependency issues that cause unnecessary recreation or stale closures
3. Async Hook Pitfalls: toast.promise double-consumer Sentry noise
4. Recommended Pattern: Hook decomposition for complex components

When to use me

Use this skill when:

• Debugging stale state after external data mutations
• Investigating StrictMode double-execution bugs
• Fixing useCallback/useMemo dependency warnings or stale closures
• Auditing toast.promise usage for double-error-reporting
• Decomposing large components into focused hooks
• Reviewing React hooks code for production-readiness

Related Skills

• react-render-antipatterns-skill: Peer — covers render-time anti-patterns (fragment keys, JSON.parse in handlers, visibility toggle inconsistencies, theme-driven design). This skill covers hook lifecycle anti-patterns.
• typescript-dry-principle-skill: Duplicate type definitions and status mappings (redistributed from original skill).
• performance-optimization-skill: Module-scope cache leaks (redistributed from original skill).

---

A. State & Ref Pitfalls

A1. derived-state-props-without-sync — Stale useState from Props

useState initialized from props becomes stale when the parent updates the prop.

Before (stale):

function EditDialog({ initialName }: { initialName: string }) {
  const [name, setName] = useState(initialName)
  // name stays "old" even after parent passes new initialName
}

After (synced):

function EditDialog({ initialName }: { initialName: string }) {
  const [name, setName] = useState(initialName)

  useEffect(() => {
    setName(initialName)
  }, [initialName])
  // OR use a controlled component with `key={initialName}` to remount
}