Rock, Paper, Scissors | (NextJS,TailwindCSS,Framer Motion)

Community feedback

• 

  Kyle Johnson•250

  @11kylePosted about 1 year ago

  Hey Emre! Great job on your solution! I checked into your question and have some feedback.

  • Score takes a negative value.

  This can be fixed by wrapping your setScore((score) => score -1) inside an if statement like so

  if (score > 0) {
    setScore((score) => score - 1)
  }
  

  • Score doesn't seem to be updating correctly

  You are right on thinking it is the useEffect hook that is causing problems here. useEffect gets called on initial render and again every time anything in the dependency array changes. You also never want to update anything from the dependency array from inside the useEffect. This could cause an infinite loop. In your case, the useEffect is running a minimum of 2 times and that is part of why you are seeing weird scores. The way your game is setup you can actually leave the dependency array empty like so

   useEffect(() => {
     onSelect();
   }, []);
  

  In addition, there's a weird thing happening with useState inside your GameContext.js. useState actually takes 'time' to update its value. It's just a part of react. When you setState and then ask your function to do something with it, it is using the previous value. You can replace houseSelection with number inside your function like so

  const onSelect = () => {
    const userSelect = GameRules[selection].value;
    const number = Math.floor(Math.random() * 3);
    setHouseSelection(number);
  
    setTimeout(() => {
      setShow(true);
      if (GameRules[number].beats.includes(userSelect)) {
        setResult("You Lose");
        setScore((score) => score - 1);
      } else {
        if (GameRules[number].value == userSelect) {
          setResult("Tie");
        } else {
          setResult("You Win");
          setScore((score) => score + 1);
        }
      }
    }, 3000);
  };
  

  Marked as helpful

  1

  ---

  

  Emre Kalfa•180

  @rustysymPosted about 1 year ago

  @11kyle

  Thank you for your feedback, Mark.

  It was quite helpful in resolving this issue for me.

  However, useEffect still continued to render twice, so I decided to use useRef to address the problem, and my issue was resolved.

  const initialized = useRef(false);
  useEffect(() => {
      if (!initialized.current) {
        initialized.current = true;
        onSelect();
      } 
  }, []);
  

  In addition to that, I restructured the code for if (score > 0) { setScore((score) => (score ? score - 1 : 0)); so that the score no longer drops to negative values.

  1