React Effects: When You Do and Don't Need Them

Effects are an escape hatch to synchronize React components with external systems (browser APIs, network, third-party libraries). Most component logic does not need Effects. Before writing or keeping a useEffect, run through the scenarios below — there's likely a simpler, more performant alternative.

The Two Questions

Before every useEffect, ask:

1. Is this transforming data for rendering? If yes, compute it during render instead.
2. Is this handling a user event? If yes, put it in an event handler instead.

If neither applies, you might actually need an Effect.

Scenarios Where Effects Are Wrong

1. Derived State from Props or State