Updating state variable without changing the value of other states assigned to them on render

Question

I'm creating this countdown app where it should display a random word and then start the timer. Timer works fine but the real problem is when I uncomment the line where the new word is updated in the state.

Since the state is changed, the component re-renders. Again the state is changed causing it to rerender and so on going into an infinite loop of updating the word. I'm not getting how to solve this in an optimal way.

EDIT: The new word generation process should repeat after timer hits zero.

function App() {
  const [newWord, setNewWord] = React.useState('Default');
  const [time, setTime] = React.useState(6);
  
  React.useEffect(() => {
    // setNewWord(generateWord())
    let intervalId = setInterval(() => {
            console.log('time reduced to ', time);
            if (time > 0) {
                setTime(time - 1);
            }
            if (time === 0) {
                clearInterval(intervalId);
                // exitGame();
            }
        }, 1000);
        return () => {
            clearInterval(intervalId);
        };
  })
  
  // Generate a new word
  function generateWord() {
    let words = ['yeah', 'lol', 'gotcha']
        let randIndex = Math.floor(Math.random() * words.length);
        return words[randIndex];
    }
  
  return (
    
       Word = {newWord} 
       Time = {time} 
    
  )
}

ReactDOM.render(, document.getElementById("root"));

user_270592 · Answer

Just call generateWord and pass the result as the initial state:

function App() {
  const [newWord, setNewWord] = React.useState(generateWord());
  const [time, setTime] = React.useState(6);
  
  React.useEffect(() => {
    let intervalId = setInterval(() => {
            console.log('time reduced to ', time);
            if (time > 0) {
                setTime(time - 1);
            }
        }, 1000);
        return () => {
            clearInterval(intervalId);
        };
  }, [time])
  
   React.useEffect(() => {
    if (time === 0) {
      // exitGame(); ?
      setNewWord(generateWord())
      setTime(6)
    }
  }, [time])
  
  // Generate a new word
  function generateWord() {
    let words = ['yeah', 'lol', 'gotcha']
        let randIndex = Math.floor(Math.random() * words.length);
        return words[randIndex];
    }
  
  return (
    
       Word = {newWord} 
       Time = {time} 
    
  )
}

ReactDOM.render(, document.getElementById("root"));

user_5157454 · Answer

Set the work's useEffect() dependencies to an empty array, so it won't be called after initial re-render. Move the exitGame logic to another useEffect().

function App() {
  const intervalId = React.useRef();
  const [newWord, setNewWord] = React.useState('Default');
  const [time, setTime] = React.useState(6);

  React.useEffect(() => {
    setNewWord(generateWord())
    intervalId.current = setInterval(() => {
      setTime(time => time > 0 ? time - 1 : time);
    }, 1000);
    return () => {
      clearInterval(intervalId.current);
    };
  }, [])
  
  React.useEffect(() => {
    console.log(time);
    if (time === 0) {
      clearInterval(intervalId.current);
      // exitGame();
    }
  })

  // Generate a new word
  function generateWord() {
    let words = ['yeah', 'lol', 'gotcha']
    let randIndex = Math.floor(Math.random() * words.length);
    return words[randIndex];
  }

  return (
    
       Word = {newWord} 
       Time = {time} 
    
  )
}

ReactDOM.render( < App / > , document.getElementById("root"));

Updating state variable without changing the value of other states assigned to them on render

2 Answers