Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsIf a React Effect runs twice when a component mounts in development, check whether <StrictMode> is enabled. React deliberately runs an extra Effect setup-and-cleanup cycle in development to expose Effects that fail to clean up properly. It is a diagnostic check—not, by itself, evidence that the initial Effect runs twice in production. The fix is usually to make setup and cleanup work as a pair, not to hide the second setup.
Why does my Effect run twice when the component mounts?
With Strict Mode enabled, React runs an additional development-only cycle before the first real Effect setup: setup, cleanup, then setup again. This tests whether the Effect can safely undo its work. The intended behavior is that a user cannot tell the difference between one setup and this extra setup → cleanup → setup sequence.
As an Amazon Associate I earn from qualifying purchases.
React’s current StrictMode documentation describes this as one of several extra development checks. Strict Mode is recommended, particularly for new applications. The Effect check was introduced in React 18, as explained in the React 18 release announcement; the precise behavior can depend on where Strict Mode is enabled. If it wraps only a subtree rather than the root, React does not perform the initial extra Effect cycle for that subtree when it would cause child Effects to run without corresponding parent Effects—a sequence that cannot occur in production.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
What an Effect’s cleanup should do
useEffect synchronizes a component with something outside React, such as a connection, subscription, or browser API. The cleanup function returned by an Effect should undo or stop the work its setup began. React calls cleanup before running the Effect again after its dependencies change, and when the component is removed.
#1 Best Overall
Pair each connection with its disconnection
For example, if an Effect opens a connection, have that setup create and connect it, and return cleanup that disconnects that same connection:
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();
return () => {
connection.disconnect();
};
}, [serverUrl, roomId]);In development Strict Mode, the sequence is connect, disconnect, then connect again. It should leave one active connection—not two. The same principle applies to other external work: undo what the setup did before another setup begins.
Close dialogs that the setup opens
If an Effect opens a dialog through an API that cannot safely be called twice in a row, its cleanup should close the dialog before the next setup opens it. Think in terms of the full lifecycle, not just the first call.
How to tell Strict Mode’s check from other reruns
Two Effect executions do not always mean the Strict Mode mount check. An Effect may run again because its dependencies changed, or repeatedly because the component keeps updating state. Check which lifecycle is happening before changing the code.
Rank #3
- Initial development check: Strict Mode runs setup → cleanup → setup on initial mount.
- Dependency change: React cleans up the previous Effect and runs it again when a dependency changes.
- Every commit: If you omit the dependency array, the Effect runs after every commit.
- Unintended dependency changes: Objects or functions recreated during rendering can change identity and trigger additional runs.
React compares dependencies using Object.is. Include the reactive values that the Effect’s setup uses; do not remove dependencies simply to silence repeated execution. Instead, simplify unnecessary object or function dependencies so they do not change identity on every render. The useEffect reference explains dependency behavior and the “My Effect runs twice when the component mounts” troubleshooting case.
Why a ref guard is not the right fix
A ref guard that allows setup to run only once can conceal the real problem: missing cleanup. If the component is removed and mounted again, or the Effect needs to respond to changed dependencies, the guard may prevent necessary work while leaving stale connections or other work behind.
React’s guide to Synchronizing with Effects calls out this ref-guard approach as a common pitfall. Make the Effect’s setup and cleanup symmetrical instead, so repeating the lifecycle leaves the external system in the correct state.
Keep user-triggered actions in event handlers
An Effect is for synchronizing with an external system because the component rendered or its dependencies changed. An action that should happen only after a user expresses intent belongs in the handler for that interaction. For example, put a purchase in the button’s click handler rather than in an Effect that reacts to rendering. This avoids tying a user-requested action to the Effect lifecycle.
For one-time application initialization that is not synchronization with an external system, React’s Effects guide says it can live outside the component.
When to use useLayoutEffect instead
useLayoutEffect is for visual work that must happen before the browser paints, such as measuring a tooltip so it can be positioned correctly. It blocks repainting, so it is not a general workaround for Strict Mode’s extra Effect cycle. Choose it for the timing requirement, not to suppress a development check. See the useLayoutEffect reference for its behavior and trade-offs.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
