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.
Unnecessary unmounting/mounting children with keys
See original GitHub issueHi all, I’m the author of tikzcd-editor and am experiencing severe performance degradation after updating Preact recently.
tikzcd-editor is rendering a grid of elements onto the viewport; we only render visible grid cells. The user can use the pan tool to pan the grid, so cells outside of the viewport need to be added while panning, and cells that go outside of the viewport get removed.
Each grid cell will be typeset using MathJax on every change, which is expensive, that’s why every grid cell has a key set to its coordinates, so we avoid rerendering while panning. This worked fine in v10.4.1, but in v10.4.2 and the latest version v10.5.3, we experience a lot of unnecessary rerenders.
Reproduction
Steps to reproduce
Here’s a deployment of tikzcd-editor with v10.5.3 with a sample diagram. When trying to pan the viewport, you can see it’s not smooth at all. When opening the Devtools you can see that Preact is unnecessarily unmounting/mounting elements.
Expected Behavior
Visible children should not be unmounted/remounted like in v10.4.1:
Actual Behavior
A lot of unnecessary unmounting/rendering of children as experienced in v10.4.2 and v10.5.3:
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Was told my issues is related, so here is my case report:
Whenever you remove an uncertain number of elements from a keyed list, the elements after them get remounted. The number seems to differ between environments. On my local app it’s 20+, on the isolated example below it’s 50+.
Here is a visualization of the issue. Elements that get remounted flash red. The last 20 items should never flash, as only range 20-80 is being toggled:
This doesn’t happen for smaller amount of items being removed:
The issue is isolated here: https://codesandbox.io/s/cocky-joliot-9gw5v
@jaydenseric this has been fixed in v11, introducing this fix in v10 would be a huge perf impediment I’ve tried in https://github.com/preactjs/preact/pull/3359 for v11 with our new diffing algo it is a net positive https://github.com/preactjs/preact/pull/3358