Common useEffect Patterns

Let's explore practical patterns for using useEffect in real applications. These patterns cover the most common scenarios you'll encounter.

Data Fetching Pattern

The most common use case for useEffect is fetching data:

Handling Race Conditions

When userId changes rapidly, we need to ignore stale responses:

Document Title Effect

Syncing document title with component state:

Window Event Listener Pattern

Adding and cleaning up window event listeners:

Local Storage Sync Pattern

Syncing state with localStorage:

Debounced Effect Pattern

Debouncing expensive operations:

Interval Effect Pattern

Managing intervals with proper cleanup:

Exercise: Data Fetching

Exercise: Debounced Search

Exercise: Window Size Hook

Key Takeaways

1. Data fetching - Handle loading, data, and error states; watch for race conditions
2. Event listeners - Always clean up with removeEventListener on unmount
3. Timers - Clear intervals and timeouts in cleanup to prevent memory leaks
4. Local storage - Sync state with storage; handle initial read on mount
5. Debouncing - Use cleanup to cancel pending operations when deps change
6. Race conditions - Use a cancelled flag or AbortController to ignore stale responses