// Check if human is playing against com
  useEffect(() => {
    if (opponent === 'COM' && !turn) comAi(turn, boardState, rules, handleClick, roundIsCompleted);
  }, [turn]);

  // play and allow next turn
  useEffect(() => {
    let isMounted = true;
    // check if all spots has some value but no winner, game result is a tie 
    if (isMounted && (winPattern.length < 1) && (boardState.every(spot => spot !== ''))) {
      setTies(prevState => prevState + 1);
      setFinalResult("It's a tie");
      resetGame();
    } else if (isMounted && boardState.some(spot => spot !== '')) play(); // next player's turn
    return () => {
      isMounted = false;
      clearTimeout(timeout);
    }
  }, [boardState]);

When Game.js mounts, following how the useEffects are called, the comAI plays and the "else if" statement in the second useEffect will evaluate to false which won't call the play() function that toggles the turn value. But comAi will cause boardState to update through the handleClick() function which will in effect cause a rerender of the component and since turn is still false, comAi will play again. By this second rerender, the "else if" statement in the second useEffect will evaluate to true which then calls the play() function.

so switching the order of the useEffects like below solved the issue

  // play and allow next turn
  useEffect(() => {
    let isMounted = true;
    // check if all spots has some value but no winner, game result is a tie 
    if (isMounted && (winPattern.length < 1) && (boardState.every(spot => spot !== ''))) {
      setTies(prevState => prevState + 1);
      setFinalResult("It's a tie");
      resetGame();
    } else if (isMounted && boardState.some(spot => spot !== '')) play(); // next player's turn
    return () => {
      isMounted = false;
      clearTimeout(timeout);
    }
  }, [boardState]);


// Check if human is playing against com
  useEffect(() => {
    if (opponent === 'COM' && !turn) comAi(turn, boardState, rules, handleClick, roundIsCompleted);
  }, [turn]);

The Problem

The AI plays twice when I select the O marker (which makes it play first as X goes first). This might be a rendering issue.

Steps to Reproduce Issue

• Select O marker
• Select COM as the opponent
• Click the START button to launch the game

See screenshots: