useEffect manages side effects in React components. Here's how to use it correctly.
Basic Patterns
Loading code block...
Data Fetching
Loading code block...
Event Listeners
Loading code block...
Subscriptions
Loading code block...
Timers
Loading code block...
Document Effects
Loading code block...
Common Pitfalls
Loading code block...
Sync vs Effects
Loading code block...
Testing Effects
Loading code block...
Best Practices
Dependencies:
✓ Include all values used inside effect
✓ Use primitives when possible
✓ Memoize objects and functions
✓ Use refs for non-reactive values
Cleanup:
✓ Always clean up subscriptions
✓ Cancel pending requests
✓ Clear timers
✓ Remove event listeners
Structure:
✓ Keep effects focused
✓ Split unrelated logic
✓ Extract into custom hooks
✓ Avoid effects for derived state
Conclusion
useEffect handles side effects like data fetching, subscriptions, and DOM manipulation. Always clean up effects, include all dependencies, and avoid common pitfalls like infinite loops. Extract reusable logic into custom hooks and compute derived state during render rather than in effects.