How to Fix React useEffect Cleanup Not Called on Unmount in Strict Mode
- All new
useEffectcalls include a cleanupreturnfunction - Async effects use
AbortControlleror equivalent cancellation
React 18's concurrent renderer throws a synchronous state update warning when a child component triggers a setState on a parent or sibling during its own render phase, breaking the unidirectional data flow contract.
React 18 throws a hydration mismatch when useEffect mutates text content that differs between server-rendered HTML and the client's first paint.
React 18 automatic batching silently fails inside native event handlers, setTimeout, and Promise callbacks when legacy ReactDOM.render is still in use, causing redundant re-renders and state tearing.
Unconditional setState inside componentDidUpdate triggers an infinite re-render loop, freezing or crashing the browser tab.
A non-serializable value (class instance, function, Map, Date, etc.) was stored in Redux state, breaking time-travel debugging, state persistence, and server-side rendering hydration.
Webpack's optimization.splitChunks silently fails to split React.lazy() dynamic imports when misconfigured chunk naming, cacheGroups, or async boundary settings conflict with the module graph.
useEffect calls include a cleanup return functionAbortController or equivalent cancellation"Part of the Performance Utility Matrix."
View all 219 Performance Tools →