Why everyone should stop using particles.js right now
Tags: showdev, html, javascript, webdev
Published: 2022-02-21 15:41:00

# Should I stop using particles.js? Why?

Yes, a lot of devs are using `particles.js` for their websites displaying simple and cool particles animations.

[![particles.js JSDelivr](https://data.jsdelivr.com/v1/package/npm/particles.js/badge?style=rounded&_=1234)](https://www.jsdelivr.com/package/npm/particles.js)

46 millions (at the moment of writing) of monthly requests on JSDelivr, not bad I should say. But all these websites can have a better alternative, instead of using an old library with a *HUGE* memory leak.

## Memory leak? Uh?

If you don't believe me, test it out yourself below

{% codepen https://codepen.io/matteobruni/pen/dyZeYOg %}

And if you don't trust me, the button code is not a classic click counter, it's a counter of the `particles.js` instances.

``` javascript
const updateInstances = () => {
  document.querySelector("#instances span").innerText = `${pJSDom.length}`;
};

const refreshParticles = () => {
  particlesJS("particles-js", {
    interactivity: {
      detect_on: "window"
    },
    particles: {
      number: {
        value: 200
      },
      move: {
        speed: 6
      },
      size: {
        value: 1
      }
    }
  });

  updateInstances();
};

document
  .querySelector("#instances button")
  .addEventListener("click", refreshParticles);
```

This is the code used in the CodePen, it's already visible but it's easier to read it here. Feel free to test it in your `particles.js` 

After a few clicks the button is not responding, am I right?

Isn't it enough?

If you have a screen with more than `60hz` refresh rate, try changing it and see the sample with Chrome, is it getting slower or faster depending on the refresh rate, right?

Lot of devices are getting `120hz` refresh rate, or even `144hz`, and I don't think you want different animations with different rates.

## So what should you do?

There's already a libary fixing all these issues, and many other that you can read here

{% link https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe %}

{% link https://dev.to/matteobruni/is-particles-js-still-good-in-2021-3oag %}

The replacing library is [tsParticles](https://github.com/matteobruni/tsparticles), which can start also with a `particles.js` configuration.

Be careful when upgrading from `particles.js`, `tsParticles` has a default `fullScreen` option set, so particles will start set as background with a `z-index: 0`, and the `particles.move.speed` needs to be slowed down, since `particles.js` has a bug *(strange, uh?)* with that value, horizontal and vertical particles were faster than the others.

With the migration, you'll get also confettis, fireworks, particles spawning from areas, more interactions, more particles shapes, and more...

`tsParticles` is already being used a lot:

[![tsParticles JSDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded&_=1234)](https://www.jsdelivr.com/package/npm/tsparticles)

212 millions (at the moment of writing) of monthly requests on JSDelivr, 166 millions more than `particles.js`, and you can be part of this change.

Ok, lot of words, but here's the proof that almost the same code is not having a memory leak

## tsParticles - no memory leak

{% codepen https://codepen.io/matteobruni/pen/xxPjwLz %}

Again, the button is not faking the update, here's the code:

``` javascript
const updateInstances = () => {
  document.querySelector("#instances span").innerText = `${
    tsParticles.dom().length
  }`;
};

const refreshParticles = () => {
  tsParticles.load("tsparticles", {
    background: {
      color: "#000"
    },
    interactivity: {
      events: {
        onClick: { enable: true, mode: "push" },
        onHover: {
          enable: true,
          mode: "repulse"
        },
        resize: true
      },
      modes: {
        push: { quantity: 4 },
        repulse: { distance: 200, duration: 0.4 }
      }
    },
    particles: {
      color: { value: "#ffffff" },
      move: {
        bounce: false,
        direction: "none",
        enable: true,
        outModes: "out",
        random: false,
        speed: 2,
        straight: false
      },
      number: { density: { enable: true, area: 800 }, value: 200 },
      opacity: {
        value: 0.5
      },
      links: {
        enable: true
      },
      size: {
        value: 1
      }
    }
  });

  updateInstances();
};

document
  .querySelector("#instances button")
  .addEventListener("click", refreshParticles);
```

It's a bit different, mainly the configuration, since almost every feature is disabled by default.

And try the refresh rate test, the particles speed remains the same.

You're welcome.

---

{% github matteobruni/tsparticles %}