Skip to content

Commit 0749c53

Browse files
committed
Address conditional browser rendering feedback
1 parent 12a4415 commit 0749c53

1 file changed

Lines changed: 3 additions & 3 deletions

File tree

src/content/reference/react-dom/browser.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -236,9 +236,9 @@ export default function SavedDraft() {
236236
237237
### Conditionally rendering on the server {/*conditionally-rendering-in-the-browser*/}
238238
239-
Like other calls to [`use`](/reference/react/use), you can call `use(browser())` conditionally or inside a custom Hook. For example, a `useTimeZone` Hook can accept an initial time zone when one is available and read it from the device when it is not.
239+
Like other calls to [`use`](/reference/react/use), you can call `use(browser())` conditionally. This lets a Component or custom Hook opt out of server rendering based on a condition, such as the value of a prop passed to it.
240240
241-
If an initial time zone is provided, `useTimeZone` includes it in the HTML. Otherwise, `use(browser())` leaves the closest [`<Suspense>`](/reference/react/Suspense) boundary's fallback in the HTML. In the browser, `use(browser())` returns `undefined`, so `useTimeZone` reads the user's time zone from the device.
241+
For example, `useTimeZone` accepts an optional initial value. If provided, that value is included in the initial HTML and rendered in the browser. If not, `use(browser())` causes the Component calling `useTimeZone` to suspend during server rendering. In the browser, `useTimeZone` reads the device's local time zone.
242242
243243
Click **Reload** to see the loading fallback before the user's time zone appears.
244244
@@ -400,7 +400,7 @@ function ProductDetails({ productId, initialData }) {
400400
}
401401
```
402402
403-
During server rendering, `useBrowserQuery` calls `useQuery` only when `initialData` is available. Otherwise, the closest Suspense boundary's fallback remains in the HTML. In the browser, `use(browser())` returns `undefined`, so the query library can fetch the data or read it from its client cache.
403+
This way, if `initialData` is not provided, `useBrowserQuery` skips server rendering, leaving the closest [`<Suspense>`](/reference/react/Suspense) boundary's fallback in the HTML. In the browser, `use(browser())` does not suspend, so the query library can fetch the data or read it from its client cache as usual.
404404
405405
---
406406

0 commit comments

Comments
 (0)