Toggling audio in React without re-rendering component

General
1

I have built a game using React (and Matter JS and p5.js). It mainly has 2 variables, score (increments everytime goal is hit) and timer (decrements every second).
I want music to play in the background if user wants. So I have an audio toggle button. But I have to use a state variable to ensure the audio is playing/pausing as required. Such a state update re-renders the component and thus resets the score and timer variables.

Is there any way to toggle the audio in React without using a state variable, avoiding re-rendering the component, or at least some way for React to know that if it gets re-rendered while in the “/game” page, it shouldn’t reset the score and timer?

Here is the part of the code that handles the audio:

            audioButton = p.createImg(audioRef.current.paused ? audioOff : audioOn, "audio button");
            audioButton.position(20, p.height - 50);
            audioButton.size(30, 30);
            audioButton.mouseClicked(() => {
                if (audioRef.current.paused) {
                    audioRef.current.play();
                } else {
                    audioRef.current.pause();
                }
                setPlaying(prevPlaying => !prevPlaying);
                setTimeout(() => {
                    audioButton.elt.src = audioRef.current.paused ? audioOff : audioOn;
                }, 0);
            });

My score and timer are defined as follows:

//GLOBAL VARIABLES
let score = 0;
let timer = 0;

function Game() {  
    score = 0;
    timer = 0;


    /*REST OF THE GAME LOGIC...*/
}

I have already tried making score and timer state variables instead of global variables. There must be some p5.js issue in that case which doesn’t update the score and the timer at ALL (they remain as 0 and 42 respectively).

Any help would be appreciated, thanks!

2

. 1 Use React State for Game State:

  • Refactor score and timer into state variables using useState . Use React State for Game State:

  • Refactor score and timer into state variables using useState

JavaScript

function Game() {
  const [score, setScore] = useState(0);
  const [timer, setTimer] = useState(0);

  // ... rest of the game logic
}
  • Update score and timer in the component using the setters (setScore and setTimer ).

2. Use useEffect for Timer Updates:

  • Employ useEffect to manage the timer update that occurs every second:

JavaScript

useEffect(() => {
  const intervalId = setInterval(() => {
    setTimer(prevTimer => prevTimer - 1);
  }, 1000);

  return () => clearInterval(intervalId); // Cleanup function
}, []);

Update Audio State Separately (Optional):

  • If audio toggle behavior isn’t tightly coupled to game state, you can still maintain a separate state variable (isPlaying ) for the audio:

JavaScript

const [isPlaying, setIsPlaying] = useState(false);

JavaScript

audioButton.mouseClicked(() => {
  if (audioRef.current.paused) {
    audioRef.current.play();
  } else {
    audioRef.current.pause();
  }
  setIsPlaying(!isPlaying);
  // ... update audio button image
});