ReactTooltip renders very slow when used many time on the same page
See original GitHub issueI’m displaying tooltips in some table cells in tables that contain 500+ items. Rendering is extremely slow. When I remove just the ReactTooltip
elements, the table renders quickly. When a tooltip appears in every row in the table that contains about 500 items, my browser slows to a crawl for a bit until the render is complete.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:40
- Comments:9
Top Results From Across the Web
ReactTooltip renders very slow when used many time ... - GitHub
I'm displaying tooltips in some table cells in tables that contain 500+ items. Rendering is extremely slow. When I remove just the ...
Read more >ReactTooltip renders very slow when used many time on the ...
I'm displaying tooltips in some table cells in tables that contain 500+ items. Rendering is extremely slow.
Read more >React-tooltip rendering two times - Stack Overflow
The problem is that is rendering in the bottom but also on the top. How can I make this to only appear on...
Read more >My React App is Slow. What Should I do? | by David Han
We can try to fix as many “unnecessary renders” as we can, but it's hard to avoid the fact that we'll likely be...
Read more >Controlling tooltips & pop-up menus with components in React
Editor's note: This post was updated on 1 February 2021. Hiding further information behind an interaction with an icon, button, or text is...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Managed to resolve my issue with
rc-tooltip
https://github.com/react-component/tooltipInterested in this issue. I have a page with a couple hundred items on it that need a tooltip and I’m unsure of the right way to do this.
If I include a
<ReactTooltip>
for every item, the page is unusable - not only is there huge multisecond delay introduced by the tooltip on initial render, actually hovering over the items is extremely laggy.I tried having a single
<ReactTooltip>
element at the root in combination with thegetContent
prop, but the getContent function doesn’t receive any arguments to know what it’s supposed to be rendering.