Memory leaks: too many detached nodes

[Jayvora]

There are too many detached nodes in my application, this is because of react-tooltip, if i comment it all are gone, how can i get rid of this. This i causing too many memory leaks and causing my app being laggy.

I am using v5.24.0

[gabrieljablonski]

Difficult to say what the cause is without seeing the code.

Try taking a look at our troubleshooting page, specifically the "Dynamically generated anchor elements" section.

https://react-tooltip.com/docs/troubleshooting#dynamically-generated-anchor-elements

[Jayvora]

^^ Here i have added two tooltips component on root of my webapp that is "_app.js"

^^ And using as the data-attribute in whole app like this.

So i guess its the correct way of using, let me know if i am doing anything wrong

Seeing too many detached nodes, if i remove those two components from "_app.js" then all the detached nodes are gone

[gabrieljablonski]

@Jayvora best I can think of is that the tooltip might be leaking nodes with the render prop. Can you test a couple things to help us narrow it down? Don't forget to do the test with both your tooltips (or simply remove one of them, so testing is easier)

1. Remove the render prop from both your tooltip components, and just use the content prop with any text, so the tooltip still shows

2. Remove your RenderTooltip component to simplify the render function. Your custom component might be causing a weird interaction with the tooltip

Something like this should be good enough to test # 2:

<Tooltip
  ...
  render={({ content }) => content}
  ...
/>

Please let us know if either test makes the detached nodes disappear. We might be able to investigate further from your findings.

[naresh-pin]

Seems to be the case with example implementation aswell, additionally can see JS event listeners flooding on every refresh or even on hovering on any tooltips.

I am suspecting possibility of some memory leak here https://github.com/ReactTooltip/react-tooltip/blob/143221a23d73c88fc1404d103ea419fae5b31efb/src/components/Tooltip/Tooltip.tsx#L458-L637

[mattathompson]

👍 having the same issue. Single Tooltip at the root of my React application. Seeing many leaks when having lists of dynamic items that have the data-tooltip attributes.

I looked at the troubleshooting guide before coming here and confirmed we're doing what's suggested.

Here are comparison Heap Snapshots I took after using the UI and making the dynamic items re-render

First one is with the data-tooltip attributes in place:

Second one doing the same, but without the data-tooltip attributes in place:

[mattathompson]

We were using an older version of the library (5.19.0) and then upgraded to the latest (5.27.1) and reran snapshots. That solved the issue for us.

My guess is that this was fixed in a recent version and y'all can probably close this issue.

[gabrieljablonski]

@mattathompson thanks for reporting back

@Jayvora @naresh-pin can you guys confirm if it still happens for you in the latest release?

[github-actions[bot]]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

[github-actions[bot]]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.