question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReactTooltip renders very slow when used many time on the same page

See original GitHub issue

I’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:closed
  • Created 6 years ago
  • Reactions:40
  • Comments:9

github_iconTop GitHub Comments

4reactions
divyanshu013commented, Feb 16, 2018

Managed to resolve my issue with rc-tooltip https://github.com/react-component/tooltip

3reactions
joshhuntcommented, Sep 26, 2017

Interested 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 the getContent prop, but the getContent function doesn’t receive any arguments to know what it’s supposed to be rendering.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found