CODEWITHSUNDEEP
javascriptreactjsreact-reduxreact-hooks
Haroon Omer
Haroon Omer

Reputation: 23

Warning: Cannot update a component (`App`) while rendering a different component

I have a function called setScore( ) in my APP component which is passed down as props to my Popup Component. I want to call the UpdateScore( ) function based on a condition in my Popup Component. However, I also want to call the setScore( ) method based on a condition but it gives me the error listed above.

const Popup = ({user,correctLetters,wrongLetters,setPlayable,selectedWord, playAgain, currentQuestion, words, score, setScore, quitGame}) => {

    function UpdateScore() {

            if(!check){
                check = true;    
                setScore(score => (score + 1));               
            }    
    };

    if ((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion < words.length -1)){
        UpdateScore();
    } 
    else if((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion === words.length -1 )){
        UpdateScore();
    }

This isn't the complete code but the main issue is with the setState( ) call. I've looked at other posts and they resolved it by wrapping the setState method in a useEffect but then it gives me another error :

Cannot Conditionally render useEffects.

Any idea how I can resolve this?

Upvotes: 1

Views: 738

Answers (2)

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

The problem is that you are calling a UpdateScore (that calls setScore) in component's body and this is not how React works. If you want to execute if...else if at Popup first render, use an useEffect hook in this way:

useEffect(() => {
    if ((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion < words.length -1)){
        UpdateScore();
    } 
    else if((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion === words.length -1 )){
        UpdateScore();
    }
}, [correctLetters, wrongLetters, selectedWord, currentQuestion, UpdateScore]);

Actually, this useEffect will be triggered every time one of correctLetters, wrongLetters, selectedWord, currentQuestion, UpdateScore changes his value (but you need these as dependencies otherwise you will get a warning on "missing dependencies").

Upvotes: 1

HMR
HMR

Reputation: 39270

Probably the following works:

const isWin =
  checkWin(correctLetters, wrongLetters, selectedWord) ===
    'win' &&
  currentQuestion <= words.length &&
  !check;
React.useEffect(() => {
  if (isWin) {
    check = true;
    setScore((score) => score + 1);
  }
}, [isWin, setScore]);

I do see a problem with check and have a feeling it should be in a useRef.

Upvotes: 1

Related Questions