why does this log the old value and not the new value

Question

const [title,setTitle] = useState(""); 
const titleHandler=e => {
setTitle(e.target.value) 
console.log(title) 
}  

Why does this code log the old value of title and not the new one. I'm new to js and react please can anyone explain this to me

Answer 1

it happend because when you call setTitle it doesn't update the state instantaneously but it trigger a rerender of the component with the updated state

if you do

const [title,setTitle] = useState(""); 
const titleHandler=e => {
setTitle(e.target.value) 
console.log('updating title') 
}  

useEffect(() => {
  console.log('title updated', title)
}, [title])

you can see for yourself