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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Use ResizeObserver to listen to size changes #360

Merged
merged 2 commits into from
Aug 3, 2022

Conversation

christiankaindl
Copy link
Contributor

Reduces idle CPU usage and should also improve scrolling performance. The previous approach used a requestAnimationFrame() loop with calls to getBoundingClientRect() on every frame.

Fixes #359

Before
Screen Shot 2022-08-02 at 20 29 51

After (+ dark mode 馃槃):
Screen Shot 2022-08-03 at 00 54 43

Verified it still works, the number of items increase and decrease when resizing:

Screen.Recording.2022-08-03.at.00.53.53.mov

The previous approach used a `requestAnimationFrame()` loop with calls to `getBoundingClientRect()` on every frame.

Fixes TanStack#359
@tannerlinsley
Copy link
Collaborator

Fantastic! Would you mind making this same change in react-charts? ;)

@tannerlinsley tannerlinsley merged commit 3eba856 into TanStack:beta Aug 3, 2022
@tannerlinsley
Copy link
Collaborator

The release is failing because of the dependency removal. It changed the output structure of the rollup files. npm run build locally and ensure the exports in package.json map to the correct output files.

@christiankaindl
Copy link
Contributor Author

christiankaindl commented Aug 3, 2022

Thanks for merging so fast, awesome! 馃檶

Would you mind making this same change in react-charts? ;)

Sure, I will give it a try, probably later today.

The release is failing because of the dependency removal. It changed the output structure of the rollup files. npm run build locally and ensure the exports in package.json map to the correct output files.

Should I push to this branch or create a new PR? See below

@christiankaindl
Copy link
Contributor Author

Created a PR for the build issue -> #361

@christiankaindl christiankaindl deleted the resize-observer branch August 3, 2022 13:32
christiankaindl added a commit to christiankaindl/react-charts that referenced this pull request Aug 3, 2022
tannerlinsley pushed a commit to TanStack/react-charts that referenced this pull request Aug 3, 2022
devlancer-lucas added a commit to devlancer-lucas/react-charts that referenced this pull request Mar 17, 2023
AwfulDarkness0110 added a commit to AwfulDarkness0110/react-charts that referenced this pull request Jun 28, 2023
acestar121 added a commit to acestar121/react-charts that referenced this pull request Nov 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

getBoundingClientRect() is called on every frame, uses significant CPU
2 participants