preact
preact copied to clipboard
preactjs
Unnecessary unmounting/mounting children with keys
Hi 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:
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
In your case @darsain, the magic number is more than a half. Probably this has something to do with it.
Echoing from various discussions elsewhere: the j/2 child search optimization was never supposed to apply to keyed matches, which to me makes this a bug rather than just a performance degradation.
This issue causes serious FOUC problems when rendering arrays of link DOM nodes for stylesheets and something early in the list changes, see:
https://github.com/preactjs/preact/issues/3285#issuecomment-992227947
What is an ETA for a fix? Is it fixed in main branch already? Will it ship in Preact v11, or in a v10 patch? If there is a prerelease version with the fix, is there a way to use it via JSPM CDN? Are there any known workarounds?
@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
That's great news, when do you think v11 will be released? I'm currently working full time on a buildless SSR web app framework for Deno based around Preact, and this issue is a blocker. If there is no way to try a v11 prerelease, and a stable v11 if far away, I might have to reschedule my next few weeks.
Also, I'm keen to contribute to improving Preact, particularly regarding Deno compatibility. Is the main branch the one to PR?