react-useeffect-avoid

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:

Scenario	Problem	Alternative
Derived state	Double render	Calculate during render
State resets	Stale data	Use key prop
User actions	Lost intent	Event handlers
List filtering	Extra renders	Filter in render
Browser APIs	Tearing bugs (concurrent)	useSyncExternalStore
Form submission	Fragile flag pattern	Direct async handler
Data fetching	Manual cache management	React Query, SWR, Suspense

✅ 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

Topic	File	When to Use
Anti-patterns with examples	context/anti-patterns.md	Detailed code examples of useEffect mistakes
Patterns to always avoid	context/patterns-to-avoid.md	Common anti-patterns like logging, DOM manipulation
Decision tree & references	context/decision-tree.md	Quick lookup and further reading

References

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