title: how to stop react-p5-wrapper running in background
body: <p>I faced an issue with <code>react-p5-wrapper</code> that it is running in background although I have switch to another route in my react app.</p>
  <p>For example, I am currently in <code>/game</code>, and the console is logging <code>&quot;running draw&quot;</code>, but when I switch to <code>/about-us</code>, it still logging, meaning it is still running the draw function</p>
  <p><a href="https://codesandbox.io/s/react-p5-problem-vmoi4?file=/src/game.js" rel="nofollow noreferrer">Here is my code in sandbox</a></p>
  <p><strong>App.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import &quot;./styles.css&quot;;
      import { Route, Switch, BrowserRouter as Router, Link } from &quot;react-router-dom&quot;;
      export default function App() {
          return (
              &lt;div className=&quot;App&quot;&gt;
                  &lt;Router&gt;
                      &lt;Link to=&quot;/game&quot;&gt;Game&lt;/Link&gt; | &lt;Link to=&quot;/about-us&quot;&gt;About Us&lt;/Link&gt;
                      &lt;Switch&gt;
                          &lt;Route path=&quot;/about-us&quot; component={require(&quot;./abtus&quot;).default} /&gt;
                          &lt;Route path=&quot;/game&quot; component={require(&quot;./game&quot;).default} /&gt;
                      &lt;/Switch&gt;
                  &lt;/Router&gt;
              &lt;/div&gt;
          );
      }
  </code></pre>
  <p><strong>game.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import { useEffect } from &quot;react&quot;;
      import { ReactP5Wrapper, P5Instance } from &quot;react-p5-wrapper&quot;;
  
      // Sound
      let pointSound, endSound;
      let playEndSound = false;
  
      /**
      * @param {P5Instance} p
      */
      const sketch = (p) =&gt; {
          const MAX_SPEED = 15;
  
          const pickDirections = () =&gt; {
              return ((Math.floor(Math.random() * 3) % 2 === 0 ? 1 : -1) * (Math.floor(Math.random() * 2) + 1));
          };
  
          const randomXPos = () =&gt; {
              return p.random(30, p.width - 30);
          };
  
          const ramdomImgIndex = () =&gt; {
              return Math.floor(Math.random() * imgs.length);
          };
  
          const reset = () =&gt; {
              score = 0;
              speed = 2;
              falls = [
                  {
                      y: -70,
                      x: randomXPos(),
                      rotation: 0,
                      direction: pickDirections(),
                      imgIndex: ramdomImgIndex()
                  }
              ];
          };
  
          const rotate_n_draw_image = (image,img_x,img_y,img_width,img_height,img_angle) =&gt; {
              p.imageMode(p.CENTER);
              p.translate(img_x + img_width / 2, img_y + img_width / 2);
              p.rotate((Math.PI / 180) * img_angle);
              p.image(image, 0, 0, img_width, img_height);
              p.rotate((-Math.PI / 180) * img_angle);
              p.translate(-(img_x + img_width / 2), -(img_y + img_width / 2));
              p.imageMode(p.CORNER);
          };
  
          // Images
          let imgs = [],
              basket = { img: null, width: 150, height: 150 },
              imgSize = 50;
  
          let screen = 0,
              falls = [
                  {
                      y: -70,
                      x: randomXPos(),
                      rotation: 0,
                      direction: pickDirections(),
                      imgIndex: ramdomImgIndex()
                  }
              ],
              score = 0,
              speed = 2;
  
          const startScreen = () =&gt; {
              p.background(205, 165, 142);
              p.fill(255);
              p.textAlign(p.CENTER);
              p.text(&quot;WELCOME TO MY CATCHING GAME&quot;, p.width / 2, p.height / 2);
              p.text(&quot;click to start&quot;, p.width / 2, p.height / 2 + 20);
              reset();
          };
  
          const gameOn = () =&gt; {
              p.background(219, 178, 157);
              p.textAlign(p.LEFT);
              p.text(&quot;score = &quot; + score, 30, 20);
      
              falls = falls.map(({ x, y, rotation, direction, imgIndex }) =&gt; {
                  // rotate while dropping
                  rotation += direction;
  
                  // dropping
                  y += speed;
  
                  return { x, y, rotation, direction, imgIndex };
              });
  
              falls.forEach(({ x, y, rotation, imgIndex }, i) =&gt; {
                  // when is lower than the border line
                  if (y &gt; p.height) {
                      screen = 2;
                      playEndSound = true;
                  }
  
                  // when reaching the border line and is within the range
                  if (
                      y &gt; p.height - 50 &amp;&amp;
                      x &gt; p.mouseX - basket.width / 2 &amp;&amp;
                      x &lt; p.mouseX + basket.width / 2
                  ) {
                      // Play Sound
                      pointSound.currentTime = 0;
                      pointSound.play();
                      // Increase Score
                      score += 10;
  
                      // Increase Speed
                      if (speed &lt; MAX_SPEED) {
                          speed += 0.1;
                          speed = parseFloat(speed.toFixed(2));
                      }
                      // Whether add new item into array or not
                      if (i === falls.length - 1 &amp;&amp; falls.length &lt; 3) {
                          falls.push({
                              x: randomXPos(),
                              y: -70 - p.height / 3,
                              rotation: 0,
                              direction: pickDirections(),
                              imgIndex: ramdomImgIndex()
                          });
                      }
                      falls[i].y = -70;
                      falls[i].x = randomXPos();
                      falls[i].imgIndex = ramdomImgIndex();
                  }
  
                  rotate_n_draw_image(imgs[imgIndex], x, y, imgSize, imgSize, rotation);
              });
              p.imageMode(p.CENTER);
              p.image(
                  basket.img,
                  p.mouseX,
                  p.height - basket.height / 2,
                  basket.width,
                  basket.height
              );
          };
  
          const endScreen = () =&gt; {
              if (playEndSound) {
                  endSound.play();
                  playEndSound = false;
              }
  
              p.background(205, 165, 142);
              p.textAlign(p.CENTER);
              p.text(&quot;GAME OVER&quot;, p.width / 2, p.height / 2);
              p.text(&quot;SCORE = &quot; + score, p.width / 2, p.height / 2 + 20);
              p.text(&quot;click to play again&quot;, p.width / 2, p.height / 2 + 60);
          };
  
          p.preload = () =&gt; {
              // Load Images
              imgs[0] = p.loadImage(&quot;https://dummyimage.com/400x400&quot;);
              imgs[1] = p.loadImage(&quot;https://dummyimage.com/400x400&quot;);
              imgs[2] = p.loadImage(&quot;https://dummyimage.com/401x401&quot;);
              basket.img = p.loadImage(&quot;https://dummyimage.com/500x500&quot;);
          };
  
          p.setup = () =&gt; {
              p.createCanvas(
                  window.innerWidth &gt; 400 ? 400 : window.innerWidth,
                  window.innerHeight &gt; 500 ? 500 : window.innerHeight
              );
          };
  
          p.draw = () =&gt; {
              console.log(&quot;running draw&quot;);
              switch (screen) {
                  case 0:
                      startScreen();
                      break;
                  case 1:
                      gameOn();
                      break;
                  case 2:
                      endScreen();
                      break;
                  default:
              }
          };
  
          p.mousePressed = () =&gt; {
              if (screen === 0) {
                  screen = 1;
              } else if (screen === 2) {
                  screen = 0;
              }
          };
      };
      const CatchingGmae = () =&gt; {
          useEffect(() =&gt; {
              // eslint-disable-next-line
              pointSound = new Audio(&quot;/game/points.wav&quot;);
              // eslint-disable-next-line
              endSound = new Audio(&quot;/game/end.wav&quot;);
              pointSound.volume = 0.3;
              return () =&gt; {
                  pointSound.muted = true;
                  endSound.muted = true;
              };
          });
  
          return (
              &lt;div className=&quot;mx-auto flex justify-center items-center&quot;&gt;
                  &lt;ReactP5Wrapper sketch={sketch} /&gt;
              &lt;/div&gt;
          );
      };
  
      export default CatchingGame;
  </code></pre>
  <p>Is there anyway to stop it from running in background when user switches route?</p>