this is not a duplicate because i tried to add an updater function and it didn't work this is the code i have
const [counter, setCounter] = useState(0);
useEffect(()=>
{
const fetchSessions =async ()=>
{
instance.events.sessionCreated({fromBlock:0}).on("data",async (evt)=>{ handleSessionCreatd(evt)})
}
fetchSessions();
},[]);
const handleSessionCreatd =async (event)=>
{
let index = event.returnValues.id -1;
let session = await instance.methods.sessions(index).call();
console.log("index is at:",index);
setCounter(counter => counter+1);
//setCounter(prev=>index);
console.log("counter is at",counter);
}
i wanted to execute a callback to newly created sessions, so i put it inside useEffect() with empty array to register my callback only once (since the eventListner keeps updating automatically), the value of index updates successfully, however the value of my counter does not update.
how do i update my counter?
even though im using useEffect() with empty array, the output is a bit wierd in that it prints the execution twice:
index is at 0
counter is at 0
index is at 1
counter is at 0
.
.
.
index is at 10
counter is at 0
then it prints the previous list another time starting from 0 (completely the same list, counter still does not update), what causes this behavior?
ps: the event is from web3.js. and even if i uncomment the second setState it still does not increment (i thought maybe its somehow still taking the catched value from the closure)
setState is async, it means that console.log can't display the value before it has changed
As I can see you are passing handler only once on initialization, and like that counter value inside handler will be retrieved from the closure. Since on initialization counter is 0, then in each log you will print that same 0 from closure which was constructed on that first(and only) time you passed event handler. Try to log outside of the event handler and see what is the value of counter. If you do need counter in event handler then you will need to include some dependencies in useEffect in order to reconstruct that closure you are reading from.
The solution was to Disable React.strictMode in index.js (just delete the line), moreover since setState is async, the execution moves to console log without necessarily executing setState therefore it outputs old values. so in order to get the final value simply console.log it outisde of useEffect, it will also give you a clue on how many times React re-renders and its optimization techniques