floating-ui / react-popper

🍿⚛Official React library to use Popper, the positioning library
https://popper.js.org/react-popper/
MIT License
2.5k stars 226 forks source link

Too many popper instances make rendering slow #419

Open shincurry opened 3 years ago

shincurry commented 3 years ago

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)

截屏2021-05-02 上午5 03 40 截屏2021-05-02 上午5 05 09

Is this a bug or am I using it incorrectly?

Packages versions

Bart-Budak commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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?