next.js
next.js copied to clipboard
vercel
Using new `useInsertionEffect`.
Hi,
I thought to use new useInsertionEffect for <Head /> component hence it used to toggle CSS efficiently where previously we used useLayoutEffect.
// Dummy component that we render as a child of Root so that we can
// toggle the correct styles before the page is rendered.
function Head({ callback }: { callback: () => void }): null {
// We use `useInsertionEffect` to guarantee the callback is executed
// as soon as React flushes the update.
React.useInsertionEffect?.(() => callback(), [callback])
return null
}
Sorry if I made any mistakes :(
Hi, I thought to use new
useInsertionEffectfor<Head />component hence it used to toggle CSS efficiently where previously we useduseLayoutEffect.// Dummy component that we render as a child of Root so that we can // toggle the correct styles before the page is rendered. function Head({ callback }: { callback: () => void }): null { // We use `useInsertionEffect` to guarantee the callback is executed // as soon as React flushes the update. React.useInsertionEffect?.(() => callback(), [callback]) return null }Sorry if I made any mistakes :(
useInsertionEffect should only be used in the CSS-in-JS libraries, as the insertion effect commits before Virtual DOM is committed to the "real" DOM, thus preventing the "flash of the screen".
And IMHO <Head /> shouldn't be used to toggle the CSS (The existing codebase should switch to useInsertionEffect instead of relying on <Head />), thus the useInsertionEffect doesn't fit here.
The common usage of <Head /> would be updating title, OpenGraph, and other meta tags (which useEffect should be used instead).
Hi, I thought to use new
useInsertionEffectfor<Head />component hence it used to toggle CSS efficiently where previously we useduseLayoutEffect.// Dummy component that we render as a child of Root so that we can // toggle the correct styles before the page is rendered. function Head({ callback }: { callback: () => void }): null { // We use `useInsertionEffect` to guarantee the callback is executed // as soon as React flushes the update. React.useInsertionEffect?.(() => callback(), [callback]) return null }Sorry if I made any mistakes :(
useInsertionEffectshould only be used in the CSS-in-JS libraries, as the insertion effect commits before Virtual DOM is committed to the "real" DOM, thus preventing the "flash of the screen".And IMHO
<Head />shouldn't be used to toggle the CSS (The existing codebase should switch touseInsertionEffectinstead of relying on<Head />), thus theuseInsertionEffectdoesn't fit here.The common usage of
<Head />would be updatingtitle, OpenGraph, and other meta tags (whichuseEffectshould be used instead).
Sorry, I thought this component used to toggle only CSS as it was described in comments 🤔
