Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Too many popper instances make rendering slow #419

Open
shincurry opened this issue May 1, 2021 · 3 comments
Open

Too many popper instances make rendering slow #419

shincurry opened this issue May 1, 2021 · 3 comments

Comments

@shincurry
Copy link

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

  • Popper.js: 2.9.2
  • react-popper: 2.2.5
@Bart-Budak
Copy link

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
Copy link
Member

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
Copy link
Collaborator

atomiks commented Apr 20, 2022

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants