question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Massive amount of rerendering introduced in v2.9.0

See original GitHub issue

Since v2.9.0 the component containing the useVirtual hook gets rerendered massively, like tens of times for every pixel scrolled. Subjectively this got even worse in v2.10.0

This codesandbox logs the rerenders to the console: https://codesandbox.io/s/jovial-tesla-ii60w?file=/package.json It has v2.8.2 preconfigured, as you can see the amount of rerendering is not great even in this version, but still within reasonable bounds. Once you upgrade to v2.9.0 or v2.10.0 in the package.json the console will show you what I’m talking about.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:3
  • Comments:12

github_iconTop GitHub Comments

7reactions
tannerlinsleycommented, Jan 20, 2022

We’ve recently reverted the 2.10 breaking change on master and pushed a new patch release. That doesn’t technically fix this perf regression, but it makes it within reach. @piecyk we should probably roll back the pixel-based rerendering on 2.x and figure out a better perf strategy with the other breaking changes in the next branch.

2reactions
osdiabcommented, Jun 16, 2022

I haven’t been able to make a repro trigger this in a sandbox, but with the v3 beta i am getting a maximum update exceeded error every time I render our components (unless I remove measureElement from each items’ refs), and with v2.10.4 it generally seems fine but i’m experiencing the same max update exceeded error in certain pages on our app. happy to give you access to our code if you want to try reproing it on our app.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to solve too many re-renders error in ReactJS?
“Too many re-renderers” is a React error that happens after you have reached an infinite render loop, typically caused by code that in...
Read more >
A Story of a React Re-Rendering Bug - Engineering Blog
The consuming app has an internal state called `isInputFocused` and the state value gets changed when the input field receives `focus` and `blur ......
Read more >
How to prevent re-rendering of components that have not ...
Personally I would avoid React.memo / React.useRef / React.useCallback . The simplest solution to your example is just create another ...
Read more >
Preventing parent component re-rendering of a big React ...
The difficulty starts when (1) I have a complex object / class that holds the values in the form, and (2) the forms...
Read more >
4 options to prevent extra rerenders with React context
But, it may slow down when the number of components to rerender is large. Now, how to solve this? Here are 4 options....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found