npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

trashable

v1.0.7

Published

A wrapper to make promises cancellable and garbage collectable

Downloads

10,807

Readme

Trashable :put_litter_in_its_place:

npm NPM file size David CircleCI npm

A wrapper to make promises cancellable and garbage collectable. See how this relates to React below and use trashable-react to make your React components garbage collectable.

Installation

npm install --save trashable

How to use

import makeTrashable from 'trashable';

let promise = new Promise((resolve) => {
    setTimeout(resolve, 10000);
});

let trashablePromise = makeTrashable(promise);
trashablePromise.then(() => {
    console.log('10 seconds have passed');
});

trashablePromise.trash();

Why you should cancel promises

You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.

— Joe Armstrong

The handlers you pass to promises often reference other objects. These objects can be quick large. This means if the promise is still in flight (not resolved or rejected), these large objects cannot be safely garbage collected even when the promise result has been forgotten and been ignored. That is why canceling promises so that the objects their handlers reference can be freed is so important.

React

In particular, this issue has reared its head in React with the use of isMount() method (now deprecated). This article gives a good explanation for why using isMount() should be avoided. Simply put, prevents a garbage collector from getting rid of potentially large React Elements.

It recommends to clean up any callbacks in componentWillUnmount so that they won't call setState() after the element has been unmounted and thus continue to reference the Element.

Unfortunately, this is not that easy if promises are used and the solution it provides in that article actually doesn't solve the garbage collection problem. The cancel method does nothing to dereference the handlers and the Element will not be garbage collected (see more in the PROOF).

Use trashable-react to make your React components garbage collectable.

Why is this any different than other Cancelable Promise libraries

Unlike other cancelable promise libraries, Trashable actually dereferences the promise handlers so that objects that were referenced can be garbaged collected appropriately, freeing up memory.

Gotchas

You need to make your promises trashable before you add your then and catch handlers. Otherwise, you will not get the garbage collection benefits.

// Do this
const trashablePromise = makeTrashable(promise);
trashablePromise.then(() => {});

// NOT this
const handledPromise = promise.then(() => {});
makeTrashable(handledPromise);

Inspiration