React Effects Guidelines

Primary reference: https://react.dev/learn/you-might-not-need-an-effect

Quick Decision Tree

Before adding useEffect , ask:

• Can I calculate this during render? → Derive it, don't store + sync

• Is this resetting state when a prop changes? → Use key prop instead

• Is this triggered by a user event? → Put it in the event handler

• Am I syncing with an external system? → Effect is appropriate

Legitimate Effect Uses

• DOM manipulation (focus, scroll, measure)

• External widget lifecycle (terminal, charts, non-React libraries)

• Browser API subscriptions (ResizeObserver, IntersectionObserver)

• Data fetching on mount/prop change

• Global event listeners

Common Anti-Patterns

// ❌ Derived state stored separately const [fullName, setFullName] = useState(''); useEffect(() => setFullName(first + ' ' + last), [first, last]);

// ✅ Calculate during render const fullName = first + ' ' + last;

// ❌ Event logic in effect useEffect(() => { if (isOpen) doSomething(); }, [isOpen]);

// ✅ In the handler const handleOpen = () => { setIsOpen(true); doSomething(); };

// ❌ Reset state on prop change useEffect(() => { setComment(''); }, [userId]);

// ✅ Use key to reset <Profile userId={userId} key={userId} />

External Store Subscriptions

For subscribing to external data stores (not DOM APIs), prefer useSyncExternalStore :

// ❌ Manual subscription in effect const [isOnline, setIsOnline] = useState(true); useEffect(() => { const update = () => setIsOnline(navigator.onLine); window.addEventListener('online', update); window.addEventListener('offline', update); return () => { /* cleanup */ }; }, []);

// ✅ Built-in hook for external stores const isOnline = useSyncExternalStore( subscribe, () => navigator.onLine, // client () => true // server );

Data Fetching Cleanup

Always handle race conditions with an ignore flag:

useEffect(() => { let ignore = false; fetchData(query).then(result => { if (!ignore) setData(result); }); return () => { ignore = true; }; }, [query]);

App Initialization

For once-per-app-load logic (not once-per-mount), use a module-level guard:

let didInit = false;

function App() { useEffect(() => { if (!didInit) { didInit = true; loadDataFromLocalStorage(); checkAuthToken(); } }, []); }

Or run during module initialization (before render):

if (typeof window !== 'undefined') { checkAuthToken(); loadDataFromLocalStorage(); }