How can I make state updating asynchronous in React+Redux

Question

I'm writing an incremental-style game in React and I have this setInterval inside App.ts:

  useEffect(() => {
    const loop = setInterval(() => {
      if (runStatus) {
        setTime(time + 1);
      }
    }, rate);

    return () => clearInterval(loop);
  });

I've also got various event handlers along the lines of:

<button onClick={() => increment(counter + 1)}>Increment</button>

Unfortunately, if I click that button multiple times in a second, it will block the setInterval from updating the time state.

This state using the hooks as well as Redux stored state.

How can I, at the very least, make my setInterval tick reliably, so that I can click around the page without blocking it?

try putting [] as your dependency for useEffect. Otherwise every time your state changes, your generating a new interval. — Keith
– Keith, Commented Dec 17, 2020 at 20:44

Nisharg Shah · Accepted Answer · 2020-12-17 20:56:48Z

2

Do it like that

[] empty dependency means only execute when a component will mount.

useEffect(() => {
    const loop = setInterval(() => {
      if (runStatus) {
        setTime(prev => prev + 1);
      }
    }, rate);

    return () => clearInterval(loop);
}, []); <--- add that []

Notes

adding time as a dependency will create an infinite loop
you need to add runStatus or rate variable as a dependency if its dynamic state

edited Dec 17, 2020 at 20:56

answered Dec 17, 2020 at 20:45

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

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

10 Comments

evolutionxbox Over a year ago

This runs on every re-render. Is this desired?

Keith Over a year ago

Your IIFE and async are not doing anything useful here, just the [] is all you need..

Nisharg Shah Over a year ago

@Keith got it, I will remove it

sjsanc Over a year ago

Fantastic, that did it for me. Thanks a bunch @Nishargshah + the rest :)

lawrence-witt Over a year ago

What if runStatus or rate change? Presumably they can otherwise they would be hard coded. They should be included in the dependency array.

|

Collectives™ on Stack Overflow

How can I make state updating asynchronous in React+Redux

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related