# Huge memory leak - React

**URL:** <https://pdfjs.community/t/huge-memory-leak-react/2577>\
**Category:** Bug Reports\
**Created:** [May 12, 2023, 12:49pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577 "2023-05-12T12:49:42Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [May 12, 2023, 12:49pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/1 "2023-05-12T12:49:42Z")

</div>

Hello, we have been using @pdftron/pdfjs-express-viewer since last week and we noticed a memory leak.

We encountered this problem while trying to use the Viewer in a Modal that unmounts everytime you close it.

Reproduce method:

1. Open htop or a similar system to monitor your memory.
2. Then go to [PDF.js Viewer Demo | PDF.js Express](https://pdfjs.express/demo)
3. Now, alternate between the demo page and the pricing page.
4. every time you enter the demo page, your memory will increase.

We are using the getInstance()  
We think dispose() is not gc everything.

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [May 12, 2023, 3:44pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/3 "2023-05-12T15:44:45Z")

</div>

Hi Carlos1,

Do you have any addEventListeners()?

Ensure you run removeEventListener on any event listeners you have added, these will hold onto the instance in memory if not removed.

As for our demo, we don’t run dispose on our instance since we don’t open/reopen it in the same page.

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [May 12, 2023, 3:46pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/4 "2023-05-12T15:46:11Z")

</div>

Hi @tgordon

Thank you for your answer, we are running dispose on our side but it doesn’t change anything, so we believe this is a bug from the viewer.

I personally spent the whole day today trying to find a solution for this. Im SUPER available to provide you with more info.

Yes, we have two event listeners, but even when I remove them, we still have the same issue.

This is quite a critical bug for us since after a few uses this crashes the whole browser.

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [May 15, 2023, 8:37pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/5 "2023-05-15T20:37:55Z")

</div>

Hi CarlosVergikosk,

- Can you please provide a sample application that reproduces the issue?
- And by chance are you calling `display: none` on the viewer?
- Or can you provide the code that you use to show/hide/remove the viewer from the webpage?

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [May 16, 2023, 7:41am UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/6 "2023-05-16T07:41:33Z")

</div>

Hi @tgordon ,  
Answer to 1: Not really, but I can explain our use-case:

We have a right tab panel that shows the viewer.  
We allow our users to open a modal with other documents at the same time.

The modal destroys its content on close, meaning it will create a new web viewer instance on each use.

Answer to 2: No, we totally unmount the viewer from our app.

Answer to 3: Yes, here it is

```javascript

const instance = getInstance()

React.useEffect(() => {
        return () => {
            if (instance) {
                instance.UI.closeDocument()
                instance.UI.dispose()
            }
        }
    }, [instance])

```

We tried to call all the methods available after each destroy but there are accumulations of data in memory on every creation of a new instance.

After a few openings, chrome crashes.

The solution of reusing a viewer is not really convenient for us.  
Ideally, the disposal function would erase everything in order to keep the memory healthy.

Best,  
Carlos

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [May 23, 2023, 12:39pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/7 "2023-05-23T12:39:46Z")

</div>

Hi @tgordon, do you have any news?

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [May 24, 2023, 6:06am UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/8 "2023-05-24T06:06:16Z")

</div>

Hi Carlos,

The implication of checking  
`if(instance)`  
means you are storing the instance object, therefore, calling

```javascript
instance.UI.closeDocument()
instance.UI.dispose()

```

**Does not delete**  **the instance**  **from memory**. You have to _ **dereference** _ the instance by (if you are using state to store the instance):

```javascript
setInstance(null)`

```

After calling closeDocument and dispose

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [May 25, 2023, 12:34pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/9 "2023-05-25T12:34:03Z")

</div>

Hi @tgordon, im using React and yes I’m using a local state to keep track of it, but the state is unmounted and so removed together with the viewer. I believe the WebViewer() is actually the problem.

I actually proved it in my example on the topic description, you have the same problem with your pdfjs viewer demo.

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [May 30, 2023, 11:01pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/10 "2023-05-30T23:01:28Z")

</div>

Hi CarlosVergikosk,

We will add this to our backlog to be prioritized by our product team. Thank you for your patience.

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [May 31, 2023, 7:10am UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/11 "2023-05-31T07:10:02Z")

</div>

@tgordon Thank you, i hope this can be done relatively quickly as it is very important for us.

![7npxae](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/a/a5bad955bac909432f236e348c887c0006cbc66a.jpeg)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 13, 2023, 8:50pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/12 "2023-06-13T20:50:26Z")

</div>

Hey CarlosVergikosk,

Were looking to release a new version sometime today or tomorrow that hopefully fixes the issue.  
You were right in some ways about not garbage collecting everything.

We actually need to convert `UI.dispose()` into a promise and I would also suggest using `instance.Core.documentViewer.dispose()` as well.

Keep an eye out for 8.7.4!

Best regards,  
Tyler Gordon

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [June 16, 2023, 6:44am UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/13 "2023-06-16T06:44:58Z")

</div>

Hey @tgordon

Any news on the release?

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 16, 2023, 10:17pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/14 "2023-06-16T22:17:47Z")

</div>

Hey CarlosVergikosk,

It has been released! Apologies for the delay

Best regards  
Tyler

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [June 19, 2023, 8:23am UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/15 "2023-06-19T08:23:17Z")

</div>

I updated my package “@pdftron/pdfjs-express-viewer” and unfortunatelly i see no difference.

I cant find the changelogs to this release, so I’m a bit confused about what changed and if there’s is something i need to change on my side.

@tgordon  
Thanks

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 19, 2023, 4:00pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/16 "2023-06-19T16:00:22Z")

</div>

Hey CarlosVergikosk,

I didn’t generate a changelog for this version since it was a patch release, basically, we pushed a couple of minor fixes.

- Use the updated dispose function, which is now a promise
- Fix Chrome printing extra blank page CSS issue
- other issues that I wasn’t directly involved in

How are you disposing with the latest version?

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [June 19, 2023, 5:14pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/17 "2023-06-19T17:14:17Z")

</div>

I’m disposing it like this.

![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/1/1afc1e7eeff43c3aecc7f18450ac1d6a9cd5d1d9.png)

I’m not sure if you are familiar with React, but what this does is that the instance disposes when a viewer is unmounted.

I don’t think we can await function on the un-mount function of React, correct me if I’m wrong.  
This seems not to work, maybe you can put me in contact with someone from technical support in order to resolve this issue.

Thanks @tgordon

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 19, 2023, 5:16pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/18 "2023-06-19T17:16:58Z")

</div>

Hey CarlosVergikosk,

Can you try doing:

```javascript
instance.Core.documentViewer.closeDocument();
await instance.UI.dispose();
await instance.Core.documentViewer.dispose()

```

We had to convert UI.dispose to a promise since there was a worker not being fully closed.

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [June 20, 2023, 8:08am UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/19 "2023-06-20T08:08:06Z")

</div>

I implemented your suggestion (as a promise) and garbage collection is still a problem.

![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/8/8d857d58a5cce27c13fb496a07ecfc96d842c2f2.png)

My memory keeps increasing until it crashes the browser and sometimes even freezes the whole computer.

The problem is not solved on our side.

I verified i correctly updated the package, and i can confirm i have the new promise changes on my node-modules source code.

Thanks in advance, @tgordon  
Hopefully, we can fix this quickly, its really a critical issue for us.

---

<div class="post-metadata">

**Author:** ![CarlosVergikosk](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@CarlosVergikosk](https://pdfjs.community/u/CarlosVergikosk)\
**Post date:** [June 26, 2023, 12:31pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/20 "2023-06-26T12:31:06Z")

</div>

Hi @tgordon , do you have any news related to this problem?

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 26, 2023, 4:07pm UTC](https://pdfjs.community/t/huge-memory-leak-react/2577/21 "2023-06-26T16:07:23Z")

</div>

Hey CarlosVergikosk,

The recent changes fixed the memory leak issue on my end, so Im curious if its an integration issue.

Can you provide a sample project to reproduce?

Best regards,  
Tyler

[Next page](https://pdfjs.community/t/huge-memory-leak-react/2577.md?page=2)
