Setting state inside a callback function when using hooks

Question

I am writing a component for my pinball game. I have to setState inside the function triggered by the 'on contact' listener. But state is not updating. Is there another design that i can try?

function Pinball(){
  const[score, setScore] = useState(0);

  useEffect(()=>{
      //... here I set physics environment and have variable world
      world.on('begin-contact',  function(contact){
             //...
             setScore( score + 1 );
       })
  }, []);

  return (<span>{score}</span>);

}

worst case scenario, wrap it with a promise, resolve the value you need from the callback, await the promise, then setState. — Michael Rodriguez
– Michael Rodriguez, Commented Dec 30, 2019 at 19:39
"I have read that we can not use setState inside nested functions." This simply isn't correct. Also, you're using a state hook, not setState. — AKX
– AKX, Commented Dec 30, 2019 at 19:41
what is world? did you check to see if the callback is executed on begin-contact event? — Asaf Aviv
– Asaf Aviv, Commented Dec 30, 2019 at 19:51
For the record, I think what you read about using the state hook was referring to calling useState. That should only be done in the functional component directly, not in a nested function. But then you can call setScore from anywhere in the enclosing scope — Danny Buonocore
– Danny Buonocore, Commented Dec 30, 2019 at 20:01
Don't forget to remove the event listener on component unmount or you'll end up with a memory leak pretty quickly. You're allowed to use the state update function anywhere you'd like; it's only the initial invocation of a hook that has rules on where it can and cannot be called. — Dan
– Dan, Commented Dec 30, 2019 at 20:02

George · Accepted Answer · 2019-12-30 20:11:28Z

1

You can use useCallback for the callback handler, and useEffect to set the 'begin-contact' event listener. You must pass dependencies in as so:

function Pinball(){
  const[score, setScore] = useState(0);
  const handleBeginContact = useCallback(function(contact){
    setScore( score + 1 );
  }), [score] );
  useEffect(()=>{
    world.on('begin-contact',  handleBeginContact);
  }, [world])

  return <span>{score}</span>;
}

You can simplify setScore event further like this: setScore(score => score+1) Then you don't have to pass the score dependency in.

Additionally, as Dan Pantry said in a comment, you will want to return a function inside the useEffect which unregisters the 'begin-contact' event listener, for example return () => world.off('begin-contact'), but that will depend on your implementation of world.

edited Dec 30, 2019 at 20:11

answered Dec 30, 2019 at 19:59

George

2,4203 gold badges18 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

George Over a year ago

No, only if world changes.

ratata Over a year ago

using setScore(score => score+1) instead of setScore(score + 1 ) solved the problem even without using the useCallback hook. I don't know the reason but it worked.

Collectives™ on Stack Overflow

Setting state inside a callback function when using hooks

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related