Before Writing useEffect

Every time you are about to write a useEffect, stop and answer this question:

Is this syncing with an external system?

External systems: WebSocket, browser APIs (IntersectionObserver, navigator.onLine), third-party libraries (map SDKs, chart widgets), DOM measurements, setInterval timers.

NOT external systems: props, state, values derived from props or state, user events (clicks, form submissions).

If the answer is no, do NOT write the effect. Use the decision tree below to find the right alternative.

Decision Tree

Before writing the effect, check each case in order:

1. Am I transforming or deriving data?

Compute it inline. No state, no effect.