I’m using React’s useState hook to manage the state in my component. However, I’ve noticed that when I update the state, the new value doesn’t seem to be reflected immediately within the same function call. Here’s a simplified example:

import React, { useState } from 'react';

const TestComponent = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
    console.log(count); // This still logs the old value of count
  };

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

export default TestComponent;

I know that state updates are asynchronous, but is there a way to get updated value immediately after calling setCount?

I know that using setTimeout with 0 delay or useEffect can help.

const increment = () => {
  setCount(count + 1);
  setTimeout(() => {
    console.log(count); 
  }, 0);
};



useEffect(() => {
  console.log(count);
}, [count]);