Why "console.log(title)" is giving old output as title although the ExpenseItem UI is changed in Browser?

Question

const ExpenseItem = (props) => {

  const [title, setTitle] = useState(props.title);
  const date = props.date;
  const amount = props.amount;

  function clickHandler(){
    setTitle("Updated");
    console.log(title);  
  }

  return (
    <Card className='expense-item'>
      <ExpenseCalender
        month = {date.toLocaleString("default", {month: "long"})}
        day = {date.toLocaleString("default", {day: "2-digit"})}
        year = {date.getFullYear()}
      />
      <div className='expense-item__description'>
          <h2>{title}</h2>
          <div className='expense-item__price'>{`$${amount}`}</div>
      </div>
      <button onClick={clickHandler}>Change title</button>
    </Card>
  )
}

expected that console.log(title) will give output as 'Updated'

But it was rendering the old title i.e the title data from the props.

Answer 1

As @Kevin Bui said in comment

setTitle() is asynchronous, which means that at the time you console.log the state, it's not updated yet

Which mean In the next line you will not get the updated value. Or other words it doesn't wait for updating the value then go to the next line.

So what is happening here is. If you console.log after the settitle() it will give you old state.

Solution 1:Log outside the function anywhere Usually I keep all my logs before return statement

console.log(title)
return (
.........
)

Solution 2:use useEffect() hook

useEffect(() => {
    // action on update of title
}, [title]);

Solution 3:use simple variable instead of usestate()

const title = props.title;

To know more about problem solution go here