Adding time-slicing with startTransition to prevent hydration from blocking the main thread for too long for those users who immediately scroll. (#4313)

* Adding timeslicing for hydrating  :)

* update
This commit is contained in:
Sanjaiyan Parthipan 2022-08-26 00:20:45 +05:30 committed by GitHub
parent 1aa5208cbe
commit 3b5f34d606
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,4 +1,4 @@
import { createElement } from 'react';
import { createElement, startTransition } from 'react';
import { createRoot, hydrateRoot } from 'react-dom/client';
import StaticHtml from './static-html.js';
@ -27,7 +27,11 @@ export default (element) =>
delete element[rootKey];
}
if (client === 'only') {
return createRoot(element).render(componentEl);
return startTransition(() => {
createRoot(element).render(componentEl);
})
}
return hydrateRoot(element, componentEl);
return startTransition(() => {
hydrateRoot(element, componentEl);
})
};