Funtional react : Increment react state after if statement

user_16465579 0
Viewed 77

On the click of a start/stop button, i trigger the handlePlay function. The handlePlay function in turn, triggers the playBeat function. Ideally, the play beat function should console.log 1222122212221222..., until i press the button to stop. At the moment it gives me 111111111111111.The state of the currentBeat does not increment which is a problem. I am using the setCurrentBeat to increment the currentbeat by 1 with each render, but this does not seem to increment.

Check out the full code.

function App() {
  const [bpm, setBpm] = useState(100);
  const [isplaying, setIsPlaying] = useState(false);
  const [numberOfBeats, SetNumberOfBeats] = useState(4);
  const [currentBeat, setCurrentBeat] = useState(0);
  const increment = useRef(null);
  // const kick = new Audio(audio2);
  // const snare = new Audio(audio3);
  const hey = 1;
  const bey = 2;

  const handlePlay = () => {
    if (isplaying) {
      clearInterval(increment.current);
      setIsPlaying(false);
      setCurrentBeat(0);
    } else {
      increment.current = setInterval(() => {
        // console.log("hello");
        playBeat();
      }, (60 / bpm) * 1000);
      setIsPlaying(true);
      setCurrentBeat(0);
    }
  };

  const playBeat = () => {
    if(currentBeat % numberOfBeats === 0){
      console.log(hey)
    }else{
      console.log(bey)
    }
    setCurrentBeat(currentBeat + 1)
  };

  const handleInc = () => {
    bpm < 300 && setBpm(Number(bpm) + 1);
  };
  const handleDec = () => {
    bpm > 0 && setBpm(bpm - 1);
  };
  const handleSlider = (e) => {
    if (isplaying) {
      clearInterval(increment.current);
      increment.current = setInterval(() => {
        playBeat();
      }, ((60 / bpm) * 1000));
      setCurrentBeat(0)
      setBpm(e.target.value);
    } else {
      setBpm(e.target.value);
    }
  };

  return (
    <div className="App">
      <h1>Metronome</h1>
      <p>{bpm} BPM</p>

      <button onClick={handleDec}>
        <AiOutlineMinusCircle />
      </button>
      <input
        type="range"
        value={bpm}
        name=""
        id=""
        min={0}
        max={300}
        step="1"
        onChange={handleSlider}
      />

      <button onClick={handleInc}>
        <AiOutlinePlusCircle />
      </button>
      <br />
      <button
        onClick={handlePlay}
        alt={isplaying ? "stop button" : "start button"}
      >
        {isplaying ? "stop" : "start"}
      </button>
      <button>tap tempo</button>
    </div>
  );
}

export default App;
react-functional-component react-hooks reactjs javascript
3 Answers

when you use setState function in eventHandler or in some function works in asynchronous, you can't guarantee setState reads fresh state. it probably reads stale state.

there are three workaround this.

  1. use useReducer which reducer always references fresh state.

  2. use callback function as a parameter of setState. in your case, setState(prev => prev +1);

  3. save your state values in useRef and ensure your event handler / asynchronous callback function read that ref values. those ref values should be updated each times when component re-render.

as using above workaround is not a ideal way,

there is a new RFC - useEvent has been proposed.

Also, I recommend you handle timeout function in useEffect, not directly in handler.

useEffect(() => {
   const nodeTime = setInterval(() => {
     ...
   })

   return () => {
     clearInterval(nodeTime) 
   }
},[someState])
user_32609530

Issues

The issue is effectively a stale enclosure over the currentBeat state value in the playBeat callback.

increment.current = setInterval(() => {
  // console.log("hello");
  playBeat(); // <-- closed over
}, (60 / bpm) * 1000);

currentBeat only has the value from when the interval was instantiated and won't update until the interval is reset/reinstantiated.

const playBeat = () => {
  if (currentBeat % numberOfBeats === 0) {
    console.log(hey)
  } else {
    console.log(bey)
  }
  setCurrentBeat(currentBeat + 1)
};

Solution

  1. Use a functional state update to correctly update the currentBeat state from the previous state value.
  2. Move the hey/bey logging into a useEffect hook to log as an intentional side-effect.

Example:

const playBeat = () => {
  setCurrentBeat((currentBeat) => currentBeat + 1);
};

useEffect(() => {
  console.log(currentBeat % numberOfBeats === 0 ? hey : bey);
}, [currentBeat, numberOfBeats]);

Edit funtional-react-increment-react-state-after-if-statement

user_86908570

If you want to incremement a state based on its previous value, you have to do it like so:

setCurrentBeat(previous => previous + 1)
user_89932570
Related