You Might Not Need an Effect

Effects are an escape hatch from the React paradigm for synchronizing a component with an external system such as a non-React widget, the network, or the browser DOM; when no external system is involved, an Effect usually is not needed. You do not need Effects to transform data for rendering: an Effect that updates state when inputs change causes an entire render pass with a stale value followed by an immediate re-render, so transform the data at the top level of the component instead, where it re-runs automatically whenever props or state change. You do not need Effects to handle user events either; put that logic in the corresponding event handlers. To cache an expensive calculation, add useMemo rather than useEffect. To reset the state of an entire component tree when a prop changes, pass a different key; to reset only part of the state, adjust it during rendering — React throws away the returned JSX and immediately retries, and only the same component's state may be updated this way, guarded by a condition to avoid loops. When fetching data, prefer a framework's built-in mechanism or a custom Hook over raw Effects, and implement cleanup to avoid race conditions. Scope: React function components. Reviewed October 4, 2026.