How to fix the useState set method is not reflecting a change immediately in React?

In React, the useState hook’s setter function may not reflect changes immediately due to the asynchronous nature of state updates. React batches state updates for performance reasons, which means that multiple set state calls within the same synchronous event handler or lifecycle method are batched together and only applied once, usually before the next render.

If we need to perform an action immediately after updating the state, we can use the useEffect hook with the state variable as a dependency. This ensures that the effect runs after the state has been updated.

Here’s an example of how we can fix it:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This function runs after every render where `count` has changed
    console.log('Count updated:', count);
  }, [count]); // Add count as a dependency

  const increment = () => {
    // Update the state
    setCount(count + 1);
    
    // This console log may not show the updated count immediately
    console.log('Incremented count:', count);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default ExampleComponent;

In this example, the useEffect hook runs after every render where the count state has changed. This ensures that any code that relies on the updated state will execute after the state has been updated.