[Solved]-Can not update state inside setInterval in react hook-Reactjs

you shouldn't use setinterval with hooks. take a look at what dan abramov, one of the maintainers of react.js, said regarding an alternative on his blog: https://overreacted.io/making-setinterval-declarative-with-react-hooks/

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

dan abramov article explain well how to works with hooks, state, and the setinterval() type of api!

dan abramov! is one of the react maintaning team! so known and i pesonally love him!

quick explanation

the problem is the problem of how to access state with a useeffect() that execute only once (first render)!

the short answer is: by the use of refs (useref)! and another useeffect() that run again when update is necessary! or at each render!

let me explain! and check the dan abramov solution! and you'll get better the statement above at the end! with a second example that is not about setinterval()!

=>

useeffect() either run once only, or run in each render! or when the dependency update (when provided)!

accessing state can be possible only through a useeffect() that run and render each relevant time!

or through setstate((state/*here the state*/) => <newstateexpression>)

but if you want to access the state inside useeffect() => rerun is necessary! meaning passing and executing the new callback!

that doesn't work well with setinterval! if you set it each time! the counter get reset! leading to no execution if the component is re-rendering fast!

if you render only once! the state is not updated! as the first run, run a one callback! and make a closure! the state is fixed! useeffect(() => { <run once, state will stay the same> setinterval(() => { <state fixed> }) }, []).

for all such kind of situation! we need to use useref! (refs)!

save to it a callback that hold the state! from a useeffect() that rerender each time! or by saving the state value itself in the ref! depending on the usage!

dan abramov solution for setinterval (simple and clean)

that's what you are looking for!

useinteval hook (by dan abramov)

import react, { usestate, useeffect, useref } from 'react';

function useinterval(callback, delay) {
  const savedcallback = useref();

  // remember the latest callback.
  useeffect(() => {
    savedcallback.current = callback;
  }, [callback]);

  // set up the interval.
  useeffect(() => {
    function tick() {
      savedcallback.current();
    }
    if (delay !== null) {
      let id = setinterval(tick, delay);
      return () => clearinterval(id);
    }
  }, [delay]);
}

usage

import react, { usestate, useeffect, useref } from 'react';

function counter() {
  let [count, setcount] = usestate(0);

  useinterval(() => {
    // your custom logic here
    setcount(count + 1);
  }, 1000);

  return <h1>{count}</h1>;
}

we can see how he kept saving the new callback at each re-render! a callback that contain the new state!

to use ! it's a clean simple hook! that's a beauty!

make sure to read dan article! as he explained and tackled a lot of things!

setstate()

dan abramov mentioned this in his article!

if we need to set the state! within a setinteral! one can use simply setstate() with the callback version!

usestate(() => {
   setinterval(() => {
      setstate((state/*we have the latest state*/) => {
          // read and use state
          return <newstateexpression>;
      })
   }, 1000);
}, []) // run only once

we can even use that! even when we are not setting state! possible! not good though! we just return the same state value!

setstate((state) => {
   // run right away!
   // access latest state
   return state; // same value (state didn't change)
});

however this will make different react internal code part to run (1,2,3), and checks! which end by bailing out from re-rendering! just fun to know!

we use this only for when we are updating the state! if not ! then we need to use refs!

another example: usestate() with getter version

to show case the how to work with refs and state access! let's go for another example! here another pattern! passing state in callbacks!

import react from 'react';

function usestate(defaultval) {
    // getting the state
    const [state, setstate] = react.usestate(defaultvalue);
    // state holding ref
    const stateref = react.useref();
    stateref.current = state; // setting directly here!
    // because we need to return things at the end of the hook execution
    // not an effect

    // getter
    function getstate() {
       // returning the ref (not the state directly) 
       // so getter can be used any where!
       return stateref.current;
    } 
    
    return [state, setstate, getstate];
}

the example is of the same category! but here no effect!

however we can use the above hook to access state in the hook simply as bellow!

const [state, usestate, getstate] = usestate(); // our version! not react
// ref is already uptated by this call

react.useeffect(() => {
  setinteval(() => {
      const state = getstate();
      // do what you want with the state!
      // it works because of the ref! get state return a value to the same ref!
     // which is already updated 
  }, 1000)
}, []); // running only once

for setinterval()! the good solution is dan abramov hook! making a strong custom hook for a thing is the cool thing to do! this second example is more to showcase the usage and importance of refs, in such state access need or problem!

it's simple! we can always make a custom hook! use refs! and update the state in ref! or a callback that hold the new state! depending on usage! we set the ref on the render (directly in the custom hook [the block execute in render()])! or in a useeffect()! that re-run at each render or depending on the dependencies!

note about useeffect() and refs setting

to note about useeffect()

useeffect => useeffect runs asynchronously and after a render is painted to the screen.

• you cause a render somehow (change state, or the parent re-renders)
  
• react renders your component (calls it)
  
• the screen is visually updated
  
• then useeffect runs

very important of a thing! useeffect() run after render() finish and the screen is visually updated! it run last! you should be aware!

generally however! effects should be run on useeffect()! and so any custom hook will be ok! as it's useeffect() will run after painting and before any other in render useeffect()! if not! as like needing to run something in the render directly! then you should just pass the state directly! some people may pass a callback! imagine some logic component! and a getstate callback passed to it! not a good practice!
and if you do something somewhere of some of such sense! and talking about ref! make sure the refs are updated right! and before!

but generally you'll never have a problem! if you do then it's a smell! the way you are trying to go with is high probably not the right good way!

in the whole i hope that gave you a good sense!

you're creating a closure because gamestart() "captures" the value of gameplaytime once when the useeffect hook runs and never updates after that.

to get around this, you must use the functional update pattern of react hook state updating. instead of passing a new value directly to setgameplaytime(), you pass it a function and that function receives the old state value when it executes and returns a new value to update with. e.g.:

setgameplaytime((oldvalue) => {
  const somenewvalue = oldvalue + 1;
  return somenewvalue;
});

try this (essentially just wrapping the contents of your setinterval function with a functional state update):

const [gameplaytime, setgameplaytime] = react.usestate(100);
let targetshowtime = 3;

// call function
react.useeffect(() => {
    gamestart();
  }, []);

const gamestart = () => {
    gamestartinternal = setinterval(() => {
      setgameplaytime((oldgameplaytime) => {
        console.log(oldgameplaytime); // will print previous gameplaytime value
        if (oldgameplaytime % targetshowtime === 0) {
          const random = (math.floor(math.random() * 10000) % wp("70")) + wp("10");
          const targetposition = { x: random, y: hp("90") };
          const spininfodata = getspinarray()[math.floor(math.random() * 10) % 4];
          newspinshow(targetposition, spininfodata, spinspeed);
        }
        return oldgameplaytime - 1;
      });
    }, 1000);
  };