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

Performance issue: updateStore blocks rendering during diffing with large arrays in reactive store #460

Open
aralroca opened this issue Sep 8, 2024 · 1 comment

Comments

@aralroca
Copy link
Collaborator

aralroca commented Sep 8, 2024

While fixing this issue, I noticed another bug (that was happening and is still happening).

When diffing on SPA (or server actions), the actual updateStore function is very slow and blocks rendering badly.

function updateStore(entries: [string, any][]) {
// Store WITH web components signals, so we need to notify the subscribers
// to keep the reactivity
if (store) {
for (const [key, value] of entries) store.set(key, value);
}
// Store WITHOUT web components signals
else $window._S = entries;
}

By doing store.set several times, it triggers notifications to update reactively, because it is a reactive map. We need to investigate what is the part that takes the longest, and then try to do this code in a non-blocking way.

It can be reproduced when you have large arrays in the store, which after deserialization always detects it as a new field in the store and is updated even if it is the same value.

@aralroca
Copy link
Collaborator Author

aralroca commented Sep 8, 2024

Another thing that consume a lot of milliseconds is recalculating styles:

Screenshot from 2024-09-08 18-17-29

for (const rule of sheet.cssRules) css.push(rule.cssText);

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

1 participant