diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index 24d37958..1040e1aa 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -8,7 +8,7 @@ import {useRouter} from 'next/router'; import {SidebarNav} from './SidebarNav'; import {Footer} from './Footer'; import {Toc} from './Toc'; -// import SocialBanner from '../SocialBanner'; +import SocialBanner from '../SocialBanner'; import {DocsPageFooter} from 'components/DocsFooter'; import {Seo} from 'components/Seo'; import PageHeading from 'components/PageHeading'; @@ -137,7 +137,7 @@ export function Page({ /> )} - {/**/} + ` in the `root`, and take over managing the DOM insid * If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates. +* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/client/flushSync) to ensure the initial render runs fully synchronously. + + ```js + const root = createRoot(document.getElementById('root')); + root.render(); + // 🚩 The HTML will not include the rendered yet: + console.log(document.body.innerHTML); + ``` + --- ### `root.unmount()` {/*root-unmount*/} diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index c6be96fd..a77cf7a7 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -46,6 +46,8 @@ function PasswordField() { * `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key) +* `useId` currently cannot be used in [async Server Components](/reference/rsc/server-components#async-components-with-server-components). + --- ## Usage {/*usage*/}