Open Jayvora opened 4 months ago
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
^^ 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
@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)
Remove the render
prop from both your tooltip components, and just use the content
prop with any text, so the tooltip still shows
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.
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
👍 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:
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.
@mattathompson thanks for reporting back
@Jayvora @naresh-pin can you guys confirm if it still happens for you in the latest release?
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