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

[arfordweb]

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.

[joshhunt]

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.

[kuldeepkeshwar]

@arfordweb @joshhunt have you find any solution/workaround for this? I'm also having same use-case

When I tried it with why-did-you-update,
I was getting warning while hovering over the cells

[Violation] Forced reflow while executing JavaScript took 411ms
[Violation] Forced reflow while executing JavaScript took 311ms
[Violation] Forced reflow while executing JavaScript took 444ms
[Violation] Forced reflow while executing JavaScript took 315ms
[Violation] Forced reflow while executing JavaScript took 273ms

[joshhunt]

Ultimately I went with https://github.com/romainberger/react-portal-tooltip

[kuldeepkeshwar]

@joshhunt I can't upgrade to React 16, any other solution?

[joshhunt]

I just copied the module's source code into my repo and made the slight modifications that were required.

…

On Thu, Dec 21, 2017 at 1:11 PM anotherjsguy ***@***.***> wrote: @joshhunt <https://github.com/joshhunt> I can't upgrade to React 16, any other solution? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#334 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAC0PujhpulQKD4fyxl9gtE8ODQCbcnRks5tClj_gaJpZM4PQrqW> .

[divyanshu013]

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

[geloski43]

I'm having the same problem until I assigned a dynamic id in ReactTooltip and data-for the element.

[lorenzfischer]

I'm having the same problem until I assigned a dynamic id in ReactTooltip and data-for the element.

I tried this, but it didn't help with the performance.

I think there is a bug here somewhere...

[mattzeunert]

Been looking into this a bit and there are probably multiple causes, but I think a big one is getting all the elements in the document on mount for each tooltip and converting that list to an array.

https://github.com/wwayne/react-tooltip/blob/064249c2d344f5fa639d97994311e484a73156b4/src/index.js#L256

[chr4ss12]

this is still an issue with the latest version, I render it thousands of times on a web page, and it adds 6 extra seconds to the web page load, note without that component the web page loads instantly.

I can see improvements from going to v4-v5 (v4 took +30 seconds, v5 takes 6 seconds)

Example usage:

              <NavLink to={`/users/${message.senderUid}`} target="_blank">
                <img
                  data-tooltip-id={tooltipKey}
                  loading="lazy"
                  src={extractThumbnailFromPhoto(message.coverPhoto)} style={{ width: '80px', height: '120px', borderRadius: 10 }} />


                <ReactTooltip
                  id={tooltipKey}
                  place="right"
                  positionStrategy="absolute"
                  float={true}
                  delayHide={1}
                  children={<div style={{ position: 'absolute', zIndex: 9999, backgroundColor: 'rgba(0, 0, 0, .9)' }}>
                    <img loading="lazy" src={message.coverPhoto?._url || message.coverPhoto?._url} width={200} height={400} />
                  </div>} />


              </NavLink>

[gabrieljablonski]

@chr4ss12 Creating a new tooltip element for each element on your list will be very inefficient no matter what you try.

You should use the tooltip component a single time, and either use the data-tooltip-html attribute on your list items to render dynamic content, or have a look at this example on the docs regarding the render prop, which is the way I recommend you do it.

[chr4ss12]

@gabrieljablonski that does speed it up thanks

[DavidSentiurin]

(React Tooltip V5)

Building on @gabrieljablonski's comment, I wanted to suggest checking out the "Bad performance" section in the documentation at this link. It provides some useful tips on improving performance.

Additionally, you can combine @gabrieljablonski's recommendation with the examples provided in the "HTML" section, which you can find here.

@chr4ss12 Creating a new tooltip element for each element on your list will be very inefficient no matter what you try.

You should use the tooltip component a single time, and either use the data-tooltip-html attribute on your list items to render dynamic content, or have a look at this example on the docs regarding the render prop, which is the way I recommend you do it.