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:
parent
1aa5208cbe
commit
3b5f34d606
1 changed files with 7 additions and 3 deletions
|
@ -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);
|
||||
})
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue