React useEffect Patterns and Pitfalls

useEffect manages side effects in React components. Here's how to use it correctly.

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

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.

React useEffect Patterns and Pitfalls

Basic Patterns#

Data Fetching#

Event Listeners#

Subscriptions#

Timers#

Document Effects#

Common Pitfalls#

Sync vs Effects#

Testing Effects#

Best Practices#

Conclusion#

Share this article

Related articles

React Hooks: A Deep Dive

Building Custom React Hooks

React Custom Hooks Patterns