Material-ui: Tooltip performances makes them unusable on large scales since v1.0.0-beta.40

[Tuaniwan]

For a project we are building, we are using material-ui, and up until v1.0.0-beta.39, our application's performances were always the same, but when we updated to beta.40, it became much, much slower, since we are using a large amount of tooltips.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behaviour

The performances should be similar to what they were, or similar to the react-tooltip library.

Current Behavior

Just to render a component that uses tooltips in a large scale (Around 1000), it takes 10 times the amount of time that it used to, to render. So it went from taking 600ms to load to 6.5 seconds. Although I am unable to show you the exact code that we have, I made a few codeSandboxes that show the performances of the different use cases.

Steps to Reproduce (for bugs)

Just click the button in the following 3 examples:

Example using Material-ui v1.0.0-beta.39
Example using Material-ui v1.0.0-rc.1
Example using Material-ui v1.0.0-rc.1 but with react-tooltip instead

Context

Maybe the problem is that Material-UI uses individual tooltips, and it seems like react-tooltip uses a single one, but changes it's position, not exactly sure how, but it makes a huge difference for the performances, as the 3 above examples will show.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | latest |
| React | latest |
| Chrome | 65.0.3325.146 |

[oliviertassinari]

@Tuaniwan The Tooltip needs some serious refinement. I will look into that post v1. Thanks for the report.

[oliviertassinari]

So the regression is coming from #10843. We can greatly improve the performance by only mounting the Tooltips we need.

[oliviertassinari]

11431, #10909 and #11350 can be addressed at the same time with this change.

[cvburgess]

Seeing this on beta 38 and 47 (before and after the portaling) so I am not sure that is the only culprit. If you use a large number of tooltips (like in a table with a hundred rows) the performance is absolutely dreadful. We've had to temporarily disable all tooltips across our app. If there is anything that I can do to help, please let me know.

[franklixuefei]

I've experienced big perf cut when there are more than 20 tooltips. In my case, I have a table with 20 rows of data per page. Each row has a tooltip. When I change pages, the whole app will be stuck for ~600ms, which is unacceptable.

[oliviertassinari]

@franklixuefei It's a 1.2.2 regression. It's fixed in HEAD.

[oliviertassinari]

@Tuaniwan There is definitely an overhead with using a lot of tooltips on a page. I'm experiencing the same pain point:

Moving froward with #10909 should solve the problem.

[janpauldahlke]

I Dont know if this ok to raise this dead issue, but after implementing a ticket that said :"provide tooltips to xy" and there are plenty xa in my project, it drastically slowed down.

[oliviertassinari]

@janpauldahlke I don't follow. What's the issue?