You’ve noticed your React useEffect hook firing twice and your console logs are doubling up. This happens specifically in development mode with React 18 and newer versions, and while it’s intentional behavior, it can definitely mess with your debugging and cause unexpected side effects.
Problem Summary
React intentionally runs useEffect twice in development mode starting from version 18 to help you catch bugs related to improper cleanup functions. This double execution only happens in development with StrictMode enabled and won’t occur in your production build.
Step-by-Step Fixes
Step 1: Verify It’s Only Happening in Development
First, let’s confirm this is the StrictMode behavior and not an actual bug. Build your app for production and test it:
“`bash
npm run build
npm run start
“`
If the double execution disappears in production, you’re dealing with the expected StrictMode behavior. Your code is working correctly.
Step 2: Add Proper Cleanup Functions
The most important fix is ensuring your useEffect has proper cleanup. React runs effects twice to help you catch missing cleanups:
“`javascript
useEffect(() => {
const timer = setTimeout(() => {
console.log(‘Timer fired’);
}, 1000);
// This cleanup function is crucial
return () => {
clearTimeout(timer);
};
}, []);
“`
Without the cleanup, you’d have two timers running in development, which reveals the bug.
Step 3: Use a Ref to Track Initialization
For effects that should truly run once (like analytics or one-time API calls), use a ref to track if it already ran:
“`javascript
const effectRan = useRef(false);
useEffect(() => {
if (effectRan.current === true) {
return;
}
// Your one-time logic here
console.log(‘This will only run once’);
effectRan.current = true;
}, []);
“`
This approach is ideal for initialization code that shouldn’t repeat even in development.
Step 4: Handle Fetch Requests with AbortController
For API calls, use AbortController to cancel in-flight requests when the component unmounts:
“`javascript
useEffect(() => {
const controller = new AbortController();
fetch(‘/api/data’, { signal: controller.signal })
.then(response => response.json())
.then(data => setData(data))
.catch(err => {
if (err.name !== ‘AbortError’) {
console.error(err);
}
});
return () => {
controller.abort();
};
}, []);
“`
This pattern prevents race conditions and duplicate network requests.
Step 5: Temporarily Disable StrictMode (Not Recommended for Production)
If you need to debug without the double execution, you can temporarily remove StrictMode from your root component:
“`javascript
// In your index.js or main.jsx
// Change this:
root.render(
);
// To this:
root.render();
“`
Remember to re-enable StrictMode after debugging. It’s best used in development to catch potential issues.
Likely Causes
Cause #1: React StrictMode in Development
This is the intentional behavior in React 18 and newer. StrictMode runs certain lifecycle methods twice to help detect side effects that aren’t properly cleaned up. You can verify this by checking your root component file (usually index.js or main.jsx) for the StrictMode wrapper.
To check: Look for “ wrapping your App component. If it’s there, the double execution is expected behavior.
What to do: Keep StrictMode enabled and fix your effects to handle proper cleanup. This will make your app more robust.
Cause #2: Missing Dependencies in useEffect
Sometimes effects run multiple times because dependencies aren’t properly specified:
“`javascript
// This might run unexpectedly
useEffect(() => {
fetchUserData(userId);
}, []); // Missing userId dependency
// Correct version
useEffect(() => {
fetchUserData(userId);
}, [userId]);
“`
To check: Look for ESLint warnings about missing dependencies. The React hooks linter will usually catch these.
What to do: Add all referenced variables to the dependency array, or use useCallback to memoize functions.
Cause #3: Component Re-mounting
Your component might be unmounting and remounting due to parent re-renders or routing changes. This causes useEffect to run again because it’s a new component instance.
To check: Add a console.log outside your useEffect to see if the entire component is re-rendering:
“`javascript
console.log(‘Component rendered’);
useEffect(() => {
console.log(‘Effect ran’);
}, []);
“`
What to do: Check parent components for unnecessary re-renders. Use React Developer Tools to track component mount/unmount cycles.
When to Call an Expert Help
Consider getting additional help when:
- The double execution happens in production builds
- You’re seeing memory leaks or performance issues
- The behavior started after upgrading React versions
- You have complex effect dependencies that are difficult to debug
Professional React developers can help identify subtle issues with effect dependencies, optimize re-render patterns, and ensure your app follows React best practices. This is especially important for production applications where performance matters.
Copy-Paste Prompt for AI Help
If you need more specific help, copy this prompt:
“I’m using React 18 in 2025 and my useEffect is running twice in development mode. Here’s my code: [paste your useEffect code here]. I’ve verified it only happens in development with StrictMode enabled. Can you help me implement proper cleanup functions and explain if my specific use case needs the useRef pattern to prevent double execution? Also, please check if my dependency array is correct.”
Remember, the double execution in development is React helping you write better code. Instead of fighting it, embrace it by ensuring your effects are properly written with cleanup functions. Your production users will thank you for the more stable application.