[Tooltip] Performance issues

[Tooltip] Performance issues

What package(s) are you using?

• carbon-components
• 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.

[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

[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