react-useeffect-avoid

Imported from xalixilax/design-system (.github/skills/react-useeffect-avoid/SKILL.md). Install upstream with npx skills add xalixilax/design-system --skill react-useeffect-avoid. Copyright stays with the author.

React: When Not to Use useEffect

Core Principle

useEffect is an escape hatch for synchronizing with external systems, not a general-purpose tool for state management or event handling.

Modern React patterns prioritize one-way data flow and event-driven updates over effect-based synchronization to avoid performance penalties and complex synchronization bugs.

Decision Tree

Need to sync with external system?
├─ Yes (browser APIs, websockets, timers)
│  └─ Use useEffect
│
└─ No (pure React application logic)
   ├─ Derived state calculation?
   │  ├─ Yes → Calculate during render
   │  └─ No → Continue...
   │
   ├─ User action triggered?
   │  ├─ Yes → Use event handler
   │  └─ No → Continue...
   │
   ├─ State reset needed?
   │  ├─ Yes → Use key prop
   │  └─ No → Continue...
   │
   └─ Really need effect after re-think?
      └─ Yes → Use useState/useReducer/setState pattern

Quick Reference

❌ Don't use useEffect for:

✅ DO use useEffect for:

• Subscribing to external systems (websockets, browser APIs, etc.)
• Setting up timers with cleanup
• Managing third-party library integration
• Document title changes
• Analytics/telemetry when rendering completes

React 19: New Alternatives

// React 19+ - Direct resource reading
function UserProfile({ userId }) {
  const user = use(fetchUser(userId)); // Reads promise directly
  return <div>{user.name}</div>;
}

Progressive Disclosure

References

• React Docs: You Might Not Need an Effect
• React Docs: Synchronizing with Effects