# Warning: Component renders twice in development. useEffect cleanup runs immediately after mount. API called twice on component mount.

- **ID:** `react/strict-mode-double-invoke-effect`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 75%

## Root Cause

React StrictMode in development intentionally double-invokes effects to detect side-effect bugs, causing cleanup to run immediately after mount and effects to fire twice.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| react@18.2.0 | active | — | — |
| react@17.0.2 | active | — | — |

## Workarounds

1. **Ensure useEffect has a proper cleanup function that cancels the API call or subscription. This makes the double invocation harmless.** (90% success)
   ```
   Ensure useEffect has a proper cleanup function that cancels the API call or subscription. This makes the double invocation harmless.
   ```
2. **Use useRef to track if the effect has already run and skip the second invocation if needed (only for specific cases like analytics).** (80% success)
   ```
   Use useRef to track if the effect has already run and skip the second invocation if needed (only for specific cases like analytics).
   ```

## Dead Ends

- **Removing StrictMode wrapper entirely to stop double invocations** — StrictMode is a development tool; removing it hides the bug but doesn't fix it. The same bug may cause issues in production if effects have improper cleanup. (60% fail)
- **Adding a flag to prevent the second API call (e.g., if (called) return)** — This masks the StrictMode behavior but may break cleanup logic or cause stale data if the flag is not reset properly. (75% fail)
- **Ignoring the double call as a development-only issue** — If the effect has side effects like subscriptions or analytics, the double call can cause production-like bugs that are hard to debug. (50% fail)