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.