# Destroying p5.js instances

**URL:** <https://discourse.processing.org/t/destroying-p5-js-instances/38333>\
**Category:** Libraries\
**Created:** [August 12, 2022, 11:43pm UTC](https://discourse.processing.org/t/destroying-p5-js-instances/38333 "2022-08-12T23:43:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ckyiu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ckyiu/32/16154_2.png) [@Ckyiu](https://discourse.processing.org/u/Ckyiu)\
**Post date:** [August 12, 2022, 11:43pm UTC](https://discourse.processing.org/t/destroying-p5-js-instances/38333/1 "2022-08-12T23:43:26Z")

</div>

I’m trying to run a p5.js sketch on my Gatsby website, and I’ve managed to get it to work by starting it in instance mode in `useEffect` in a component. It works, but since I’m using `<Link>` instead of `<a>` for a lot of links, clicking those doesn’t clear everything and the p5.js sketch still continues to run. I would like to destroy the p5.js instance on the component lifecycle end. I am unable to find a method to completely destroy the instances. (to me, `noLoop` just seems to have p5.js sit there, not actually completely stop)

Here is my code, for reference:

```auto
import * as React from "react";
import p5 from "p5";

type SketchWrapperParameterTypes = {
  sketchFunc: (sketch: p5) => void;
  // TODO: Figure out how to make node argument to p5 constructor happy
  canvasID: any;
};

const SketchWrapper = ({
  sketchFunc,
  canvasID,
}: SketchWrapperParameterTypes): React.ReactElement => {
  React.useEffect(() => {
    console.info("Starting paint sketch");

    new p5(sketchFunc, canvasID);

    return () => {
      console.warn("Stopping paint sketch");
      // TODO: Destroy p5.js instance
      // ??? What to do here ???
    };
  }, []);

  return <div id={canvasID} className="container-fluid p-2 flex-grow-1"></div>;
};

export default SketchWrapper;

```

Here is how it would be used:

```auto
const page = (): React.ReactElement => {
  const sketchElementId: string = "paintSketch";

  const sketchFunc: (sketch: p5) => void = (sketch: p5) => {
    sketch.setup = () => {
      // ...
    };

    sketch.draw = () => {
      // ...
      console.debug("STILL RUNNING");
    };
  };

  return (
    /* ... */
      <SketchWrapper sketchFunc={sketchFunc} canvasID={sketchElementId} />
    /* ... */
  );
};

```

If I were to click a `<Link>` to somewhere, “STILL RUNNING” will still keep being logged, even though I can’t see the canvas anymore.

---

<div class="post-metadata">

**Author:** ![Ckyiu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ckyiu/32/16154_2.png) [@Ckyiu](https://discourse.processing.org/u/Ckyiu)\
**Post date:** [August 13, 2022, 12:01am UTC](https://discourse.processing.org/t/destroying-p5-js-instances/38333/2 "2022-08-13T00:01:45Z")

</div>

Found the [`remove`](https://p5js.org/reference/#/p5/remove) function by looking at the GitHub source, which appears to do what I needed! I kept searching for a function named like “stop” “exit” and “destroy” but didn’t think about “remove” haha.