I have a ponent with an <input type='file'/> to select and upload images to my Storage bucket.

I'm using FileReader().readAsText(file); which is asynchronous and I'm setting to listeners to the onload and onerror event.

From:

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

This runs everytime a user selects a file. I'm calculation an md5 hash to use as the fileName in the storage.

if (newFile !== undefined && newFile !== null) {
  md5Hash = await new Promise((resolve,reject) => {

    const reader = new FileReader();

    reader.onload = (event) => {
      console.log('md5 calculated!');
      const binary = event.target.result;
      resolve(md5(binary));
    };

    reader.onerror = (event) => {
      reject(event.target.result);
    };
    
    reader.readAsText(newFile);
    
  });
}

Do I need to bother to remove those listeners after I'm done with them? Is this a good practice or there's no point in doing that?

That code may run 5 or 6 times for different images that I'm uploading in the same page.

NOTE: It's a page to add blogPosts and the images for the posts.

I have a ponent with an <input type='file'/> to select and upload images to my Storage bucket.

I'm using FileReader().readAsText(file); which is asynchronous and I'm setting to listeners to the onload and onerror event.

From: https://developer.mozilla/en-US/docs/Web/API/FileReader

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

This runs everytime a user selects a file. I'm calculation an md5 hash to use as the fileName in the storage.

if (newFile !== undefined && newFile !== null) {
  md5Hash = await new Promise((resolve,reject) => {

    const reader = new FileReader();

    reader.onload = (event) => {
      console.log('md5 calculated!');
      const binary = event.target.result;
      resolve(md5(binary));
    };

    reader.onerror = (event) => {
      reject(event.target.result);
    };
    
    reader.readAsText(newFile);
    
  });
}

Do I need to bother to remove those listeners after I'm done with them? Is this a good practice or there's no point in doing that?

That code may run 5 or 6 times for different images that I'm uploading in the same page.

NOTE: It's a page to add blogPosts and the images for the posts.

• javascript
• filereader

2 Answers 2

No, there's no need. Eventually, the reader and the functions will have references only to each other¹ but nothing else will have references to either of them, and so they can all be garbage collected.

¹ And if the JavaScript engine optimizes those closures, which many do, only the reader has a reference to the functions, not the other way around, the way you've written them.

In your current example -

Why you care about listeners as it causes memory leaks

I will say No, you actually don't need to remove the listener as it is defined in your Promise callback fn and when that fn get executed, JavaScript Engine creates an execution context and defines it's environment variable then allocates memory. That memory get freed by garbage collector once your fn get executed and removed from callstack as references to location in the memory also limited to the fn so that get cleaned after your fn executed.

However In general case I would say Yes, you should care about listeners it's a best practice for possible memory leaks issues.