Carbon: [Tooltip] Performance issues

[ggcatu]

[Tooltip] Performance issues

What package(s) are you using?

• [X] carbon-components
• [X] carbon-components-react

Detailed description

Describe in detail the issue you're having.

Tooltip component it's creating performance issues in pages where there's multiple (lot) of instances of it.

Is this issue related to a specific component?

Tooltip Component

What did you expect to happen? What happened instead? What would you like to
see changed?

Not re-rendering, or committing changes, since no changes are made to the component itself.

What browser are you working in?

Google Chrome

What version of the Carbon Design System are you using?

"carbon-components": "^9.84.1"
"carbon-components-react": "^6.106.2"

Was able to reproduce it after upgrading to latest versions.

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Saferpayments

Steps to reproduce the issue

1. Create a component
2. Add a bunch of tooltip components
3. Suffer bad performance

In the sandbox, you can basically click on the checkbox, and you will see the response time it's really slow.
Sandbox: https://codesandbox.io/s/codesandbox-880jt

Additional information

Using the react profiler shows up a bunch of DOM commits done by the Tooltip component.

[asudoh]

Hi @ggcatu thank you for reporting! While it looks that your finding indicates something that we need to fix, let me advise that hover-over user-interaction of <Tooltip> has been deprecated (removed in v10) and <TooltipDefition> seems much closer to your use case.

[JSoet]

Hi @asudoh, any update on this, do you think this will be possibly fixed in the next month or two? We will not be able to upgrade to v10 before our next release due to the large number of design changes in it, but we are implementing a page which uses dozens of tooltips, like @ggcatu 's example and it's very noticeable...

[asudoh]

Please be advised that <TooltipDefinition> and <TooltipIcon> are available in v9 as well.

[JSoet]

Hm, thanks for the info, maybe we will be able to use tooltip definition instead, it doesn't seem to have the same problem:
https://codesandbox.io/s/codesandbox-5z2k4

[tw15egan]

Might need to do something like we did with this fix: https://github.com/carbon-design-system/carbon/pull/5336

[emyarod]

I believe this should now be resolved ref https://github.com/carbon-design-system/carbon-components-react/pull/2424 https://github.com/carbon-design-system/carbon/pull/5363