React Effect Patterns

Effects are an escape hatch from React for synchronizing with external systems. Removing unnecessary Effects makes code easier to follow, faster to run, and less error-prone.

When to Use Effects

• Synchronizing with external systems (non-React widgets, network, browser DOM)
• Analytics on component display
• Data fetching (with cleanup for race conditions)

When NOT to Use Effects

• Transforming data for rendering
• Handling user events
• Updating state based on other state

Decision Tree

Why does this code run?