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

Question

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?

You are calling setScore in your Popup render. You can't do that. If you need to update your state when a variable changes use the useEffect hook — Martin
– Martin, Commented Sep 8, 2021 at 7:40

HMR · Accepted Answer · 2021-09-08 07:46:57Z

1

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.

answered Sep 8, 2021 at 7:46

HMR

39.5k26 gold badges99 silver badges175 bronze badges

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

1 Comment

Haroon Omer Over a year ago

Thank you so much, this solved it! I needed to render after check win was satisfied.

Giovanni Esposito · Accepted Answer · 2021-09-08 07:52:28Z

1

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").

edited Sep 8, 2021 at 7:52

answered Sep 8, 2021 at 7:43

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

2 Comments

Haroon Omer Over a year ago

Thank you so much for the answer. its solved :)

Giovanni Esposito Over a year ago

@HaroonOmer No problem. Have a nice coding =)

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related