Too many popper instances make rendering slow

[shincurry]

Reproduction demo

https://codesandbox.io/s/popperjs-issue-demo-cq40c

Steps to reproduce the problem

1. Open CodeSandbox demo page, and Open In New Window
2. F12 -> developer tools -> React Profiler
3. Reload and start profiling

What is the expected behavior?

What went wrong?

Using too many poppers on the same page will cause slow rendering. The possible reason (I guess?) is that popper has made a separate render commit for each instance?

You can see there are 2000+ commits in the profiler result. (demo render 1000 tooltip components)

Is this a bug or am I using it incorrectly?

Packages versions

• Popper.js: 2.9.2
• react-popper: 2.2.5

[Bart-Budak]

Thanks for posting this, @shincurry. Will be keeping an eye on this issue. I've recently come across the same issue using react-popper@2.2.3.

@shincurry are you also seeing slow renders in production? We seem to only experience the slowdown in development env.

[FezVrasta]

react-popper doesn't support singletons so it needs an instance for each tooltip. You may want to look into Tippy.js, it provides a singleton interface that should help with performance.

[atomiks]

This isn't something that can be fixed. Positioning is not "free", especially for 1000 items! It inevitably has to do a ton of calculations on the main thread. What is the use case for this anyway?