+
+ );
+}
+```
+
+```js
+import { ViewTransition, useState, startTransition } from 'react';
+import { Video } from './Video';
+import videos from './data';
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+
+ return (
+ <>
+
+
+ {showItem && (
+
+
+
+
+ {video.title}
+ {video.description}
+
+
+ );
+}
+```
+
+```js
+import {
+ ViewTransition,
+ addTransitionType,
+ useState,
+ startTransition,
+ Fragment
+} from 'react';
+import { Video } from './Video';
+import videos from './data';
+import './animations.css';
+
+export default function Component() {
+ const [selected, setSelected] = useState(0)
+ const video = videos[selected];
+
+ return (
+ <>
+
+
+
+
+ {video.title}
+ {video.description}
+
+
+
+
+
+
+
+ );
+}
+
+export function VideoPlaceholder() {
+ const video = {image: 'loading'};
+ return (
+
+
+
+
+ {video.title}
+ {video.description}
+
+
+ );
+}
+```
+
+```js
+import { Suspense, useState, startTransition, use, ViewTransition } from 'react';
+import { Video, VideoPlaceholder } from './Video';
+import { fetchVideo } from './data';
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+
+ return (
+ <>
+
+
+ {showItem && (
+
+
+
+
+
+
+
+
+ );
+}
+
+export function VideoPlaceholder() {
+ const video = {image: 'loading'};
+ return (
+
+
+
+
+ {video.title}
+ {video.description}
+
+
+ );
+}
+```
+
+```js
+import { Suspense, useState, startTransition, use, ViewTransition } from 'react';
+import { Video, VideoPlaceholder } from './Video';
+import { fetchVideo } from './data';
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+
+ return (
+ <>
+
+
+ {showItem && (
+
+
+
+
+
+
+ + +
+ 
+
+
+ );
+}
+
+export function ProfileCardLoading() {
+ return (
+
+
+ Jack Pope
+{quote}
+
+
+
+ );
+}
+```
+
+
+```js src/VanillaProfileCard.js
+import { useRef } from 'react';
+import { fetchQuote } from './data.js';
+import { freshStylesheetUrl, freshImageUrl } from './resources.js';
+
+export function VanillaProfileCard() {
+ const ref = useRef(null);
+ async function show() {
+ const quote = await fetchQuote();
+ const doc = ref.current.contentWindow.document;
+ doc.open();
+ doc.write(`
+
+
+
+ +
+
+ })
+
+
+ `);
+ doc.close();
+ }
+ return (
+ <>
+
+
+
+ );
+}
+```
+
+```js src/resources.js hidden
+// Add a unique parameter so the resources aren't cached,
+// and every run shows the loading state.
+export function freshStylesheetUrl() {
+ return (
+ 'https://fonts.googleapis.com/css2?family=Caveat&display=swap' +
+ '&t=' +
+ Date.now()
+ );
+}
+
+export function freshImageUrl() {
+ return 'https://react.dev/images/team/jack-pope.jpg?t=' + Date.now();
+}
+```
+
+```js src/data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+
+export async function fetchQuote() {
+ // Add a fake delay to make waiting noticeable.
+ await new Promise((resolve) => {
+ setTimeout(resolve, 250);
+ });
+ return 'The best way to predict the future is to invent it.';
+}
+```
+
+```css
+#root {
+ min-height: 320px;
+}
+button {
+ margin-right: 8px;
+}
+hr {
+ margin: 16px 0;
+}
+img {
+ object-fit: cover;
+}
+.profile-card {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ margin-top: 1em;
+}
+.profile-card img {
+ border-radius: 50%;
+ background: #dfe3e9;
+}
+.name {
+ margin: 0 0 4px;
+ font-family: 'Caveat', sans-serif;
+ font-size: 22px;
+ line-height: 28px;
+ font-weight: bold;
+}
+.bio {
+ margin: 0;
+ font-family: 'Caveat', sans-serif;
+ font-size: 20px;
+ line-height: 26px;
+}
+.profile-card img {
+ display: block;
+}
+.avatar-placeholder {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ background: #dfe3e9;
+}
+.name-placeholder,
+.bio-placeholder {
+ border-radius: 4px;
+ background: #dfe3e9;
+ color: transparent;
+}
+.name-placeholder {
+ width: 90px;
+}
+.bio-placeholder {
+ width: 220px;
+}
+.vanilla-frame {
+ display: block;
+ margin-top: 1em;
+ border: none;
+ width: 100%;
+ height: 110px;
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-scripts": "latest"
+ }
+}
+```
+
+
+
+ Jack Pope
+${quote}
+` just to hold a ref sometimes works, but it can also interfere with your component's styling or layout. Moreover, if a component doesn't expose a `ref` prop, you would need to modify that component to do so, which might be impossible if it comes from a library you don't control.
+
+Fragment Refs solve these problems by providing a limited set of commonly used DOM methods that work with any React component, regardless of what it renders.
+
+In 19.3, you can use them by passing a ref directly to a [``](/reference/react/Fragment). This ref gives you a `FragmentInstance`, which you can use to work with the Fragment's DOM children:
+
+```js {2,5-6,10}
+function Component() {
+ const fragmentRef = useRef(null);
+
+ useEffect(() => {
+ const fragmentInstance = fragmentRef.current;
+ fragmentInstance.focus();
+ }, []);
+
+ return (
+
+ {posts.map(post => (
+
+ {post.title}
+
+ ))}
+
+ )
+}
+```
+
+The `FragmentInstance` operates on the children's DOM _as a group_, without changing its structure:
+
+- `addEventListener`, `removeEventListener`, and `dispatchEvent` manage events for first-level children.
+- `focus`, `focusLast`, and `blur` move focus across nested children, depth-first.
+- `observeUsing` and `unobserveUsing` connect an `IntersectionObserver` or `ResizeObserver`.
+- `getClientRects`, `getRootNode`, `compareDocumentPosition`, and `scrollIntoView` let you measure and scroll to the fragment's first-level children.
+
+Thus, Fragment Refs let you attach behavior to other components without requiring you to modify those component's internals, or without changing the DOM structure that they already produce.
+
+This example shows an `InView` component with an `onChange` prop that fires whenever its children enter or exit the viewport:
+
+
+
+```js src/App.js active
+import { useState } from 'react';
+import Card from './Card';
+import InView from './InView';
+
+export default function App() {
+ const [isVisible, setIsVisible] = useState(true);
+
+ return (
+
+ {children}
+
+ );
+}
+```
+
+```css
+.page {
+ transition: background 0.3s;
+}
+
+.page.visible {
+ background: #d4edda;
+}
+
+.filler {
+ height: 500px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #aaa;
+ font-size: 14px;
+}
+
+.card {
+ padding: 16px;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ margin: 8px 16px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+ font-weight: 600;
+ font-size: 14px;
+}
+```
+
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-scripts": "latest"
+ }
+}
+```
+
+
+
+Notice how `InView` is able to add behavior to its children, even though there's no single parent DOM element, and in spite of `Card` not exposing a `ref` prop.
+
+To learn more about working with Fragment Refs, see the [`` docs](/reference/react/Fragment).
+
+---
+
+## New React DOM Features {/*new-react-dom-features*/}
+
+### `browser` {/*browser*/}
+
+If your app uses server rendering, your components will render in two different environments:
+
+- On the server, components render to produce the initial HTML
+- On the client, components render to enrich that HTML with event handlers
+
+Most of time, your components should be able to produce HTML that matches their initial client-rendered output, ensuring they hydrate correctly while still letting users see as much content as possible on the initial load.
+
+But in rare cases, a component may not be able to produce meaningful UI on the server. For example, it might depend on a browser-only API like `localStorage`, or it might read from the browser's local timezone. In these cases, you may want to opt that component out of server rendering altogether.
+
+Previously, you might do this using some state that you'd update in an effect, or by checking for the presence of browser APIs like `window`:
+
+```js
+function Component() {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true)
+ }, [])
+
+ // ...
+}
+
+function Component() {
+ const isBrowser = typeof window !== 'undefined';
+
+ // ...
+}
+```
+
+In 19.3, React now includes a first-class API for this technique.
+
+A component can call `use(browser())` to opt out of server-side rendering:
+
+```js {5}
+import { use } from 'react';
+import { browser } from 'react-dom';
+
+function Component() {
+ use(browser());
+
+ // ...
+}
+```
+
+This will trigger Suspense on the server, but _not_ in the client. During server-side rendering, the nearest Suspense boundary's fallback will show in the HTML. Once the component is hydrated on the client, `use(browser())` does not suspend, allowing the component to continue rendering as normal.
+
+Here's an example of a component that renders the local time zone from your device. Press **Reload** to see the initial HTML followed by React's first render on the client:
+
+
+
+```js
+import { Suspense, use } from 'react';
+import { browser } from 'react-dom';
+
+function TimeZone() {
+ use(browser());
+ const timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+ return
+
+
+ );
+}
+```
+
+
+```js src/Document.js hidden
+import App from './App.js';
+
+export default function Document() {
+ return (
+
+
+ Event details
+
+
+
+ Conditional browser rendering
+
+
+
+
+
+```
+
+```css src/styles.css hidden
+iframe {
+ width: 100%;
+ height: 240px;
+ border: 0;
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-scripts": "latest"
+ }
+}
+```
+
+
+
+Because TimeZone suspends on the server, the initial HTML includes the Suspense fallback. After a small artificial delay, React hydrates the page, allowing the component to render as normal in the browser.
+
+Thus, for components that cannot produce meaningful UI during server rendering, `browser` lets you use Suspense for their loading states, allowing them to participate with other components that suspend until they're ready to render.
+
+---
+
+Like other calls to `use`, `use(browser())` can be called inside a conditional statement or after an early return. This lets you write components or custom Hooks that can opt out of server rendering based on a condition, such as the value of a prop.
+
+Here's the same example from above, except now our TimeZone component accepts an optional default value it can render as part of the initial HTML:
+
+
+
+```js
+import { Suspense, use } from 'react';
+import { browser } from 'react-dom';
+
+function TimeZone({ defaultValue }) {
+ if (defaultValue) {
+ return
+ +Event details
+
+
+
+ Conditional browser rendering
+
+
+
+
+
+```
+
+```css src/styles.css hidden
+iframe {
+ width: 100%;
+ height: 240px;
+ border: 0;
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-scripts": "latest"
+ }
+}
+```
+
+
+
+Notice how TimeZone only suspends in the second case, when no default is provided.
+
+Another useful example of this pattern is opting a data-fetching Hook like `useQuery` out of server rendering, unless that query's initial data was passed in (for example from a Server Component or framework's loader function):
+
+```js {3}
+function useBrowserQuery(query, options) {
+ if (options.initialData === undefined) {
+ use(browser());
+ }
+
+ return useQuery(query, options);
+}
+
+function ProductDetails({ productId, initialData }) {
+ const product = useBrowserQuery(`/api/products/${productId}`, {
+ initialData,
+ });
+
+ return ` can be rendered directly in Server Components {/*context-can-be-rendered-directly-in-server-components*/}
+
+While Server Components can't _create_ Context, they can _render_ Context by importing it from a `'use client'` module.
+
+Previously, this required the client module to export a separate wrapper component, often called a Provider:
+
+```js {7-9}
+// user-context.js
+'use client';
+import { createContext } from 'react';
+
+export const UserContext = createContext(null);
+
+export function UserProvider({ currentUser, children }) {
+ return {children} ;
+}
+```
+
+```js {8}
+// server-component.js
+import { UserProvider } from './user-context';
+
+export async function Layout({ children }) {
+ const currentUser = await getCurrentUser();
+
+ return (
+
+ {children}
+
+ )
+}
+```
+
+Notice that in this example, the provider does nothing other than pass the prop from the Server Component directly to the Context.
+
+In React 19.3, Server Components can import and render Context directly from a `'use client'` module, without an additional wrapping component:
+
+```js {5}
+// user-context.js
+'use client';
+import { createContext } from 'react';
+
+export const UserContext = createContext(null);
+```
+
+```js {8}
+// server-component.js
+import { UserContext } from './user-context';
+
+export async function Layout({ children }) {
+ const currentUser = await getCurrentUser();
+
+ return (
+
+ {children}
+
+ )
+}
+```
+
+This is especially useful for Contexts that solely exist to allow Server Components to share some data with the rest of the client tree.
+
+
+---
+
+## Changelog {/*changelog*/}
+
+Other notable changes
+- `react`: Render Transitions independently instead of entangling them into a single render, so a slow Transition no longer holds up unrelated ones [#37290](https://github.com/react/react/pull/37290)
+- `react-dom`: Double invoke Effects in Strict Mode during hydration, matching client-rendered roots [#35961](https://github.com/react/react/pull/35961)
+- `react`: Add a warning when `use` is used incorrectly in a conditional [#37104](https://github.com/react/react/pull/37104)
+- `react`: Rename "form state" to "action state" in `useActionState` error messages [#35790](https://github.com/react/react/pull/35790)
+- `react-dom`: Add support for `onFullscreenChange` and `onFullscreenError` events [#34621](https://github.com/react/react/pull/34621)
+- `react-dom`: Add support for the `maskType` SVG property [#35921](https://github.com/react/react/pull/35921)
+- `react-dom`: Support `fetchPriority` for module resources [#36835](https://github.com/react/react/pull/36835)
+- `react-dom`: Fire `onReset` when React automatically resets a form after a Server Action [#35176](https://github.com/react/react/pull/35176)
+- `react-dom`: Include the `submitter` in `submit` events [#35590](https://github.com/react/react/pull/35590)
+- `react-dom`: Recognize `credentialless` as a boolean attribute on iframes [#36148](https://github.com/react/react/pull/36148)
+- `react-dom`: Batch updates from `resize` events until the next frame [#35117](https://github.com/react/react/pull/35117)
+- `react-server`: Transport `Error.cause` [#35810](https://github.com/react/react/pull/35810) and `AggregateError.errors` [#36156](https://github.com/react/react/pull/36156) to the client
+- `react-server`: Add support for `` in Flight [#34697](https://github.com/react/react/pull/34697)
+
+Notable bug fixes
+
+- `react`: Fix `useDeferredValue` getting stuck on an old value [#36134](https://github.com/react/react/pull/36134)
+- `react`: Fix context propagation into Suspense fallbacks [#36160](https://github.com/react/react/pull/36160) and through suspended Suspense boundaries [#35839](https://github.com/react/react/pull/35839)
+- `react`: Fix a hang when updating a dehydrated Suspense boundary inside a hidden tree [#37135](https://github.com/react/react/pull/37135)
+- `react`: Fix `useSyncExternalStore` missing store mutations that happened while an `` tree was hidden [#36947](https://github.com/react/react/pull/36947)
+- `react`: Fix `useEffectEvent` to read the latest values in `forwardRef` and `memo` components [#34831](https://github.com/react/react/pull/34831)
+- `react`: Fix form status resetting when component state is updated [#34075](https://github.com/react/react/pull/34075)
+- `react`: Fix several Fast Refresh bugs with `lazy`, `memo`, and edits that change a component's kind [#36965](https://github.com/react/react/pull/36965), [#36964](https://github.com/react/react/pull/36964), [#36963](https://github.com/react/react/pull/36963), [#36950](https://github.com/react/react/pull/36950)
+- `react`: Fix a bug where `` was still hoisted to `<head>` after the `<Activity>` containing the `<title>` changed mode from `visible` to `hidden` [#34983](https://github.com/react/react/pull/34983)
+- `react`: Don't let errors escape a hidden `<Activity>` [#35074](https://github.com/react/react/pull/35074)
+- `react`: Hide portal contents rendered inside a hidden `<Activity>` [#35091](https://github.com/react/react/pull/35091)
+- `react`: Don't reference the internal `<Offscreen>` type in error messages [#35763](https://github.com/react/react/pull/35763)
+- `react-dom`: Fix focus for delegated and already-focused elements [#36010](https://github.com/react/react/pull/36010)
+- `react-dom`: Fix a `FragmentInstance` listener leak by normalizing capture options per the DOM spec [#36047](https://github.com/react/react/pull/36047)
+- `react-dom`: Fix a `<ViewTransition>` crash in Mobile Safari [#35337](https://github.com/react/react/pull/35337)
+- `react-dom`: Fix a `<ViewTransition>` crash with `SuspenseList` [#35520](https://github.com/react/react/pull/35520)
+- `react-dom`: Update `defaultValue` for `type="number"` inputs to match other input types [#36980](https://github.com/react/react/pull/36980)
+- `react-dom`: Avoid setting `innerHTML` when it hasn't changed [#36949](https://github.com/react/react/pull/36949)
+- `react-dom`: Fix a false-positive hydration mismatch on `nonce` attributes [#37030](https://github.com/react/react/pull/37030)
+- `react-dom`: Fix `react-dom/server` hanging on Deno [#35235](https://github.com/react/react/pull/35235)
+- `react-server`: Fix dropped `FormData` entries in `decodeReplyFromBusboy` [#36468](https://github.com/react/react/pull/36468)
+- `react-server`: Fix a stack overflow with deep async chains [#35612](https://github.com/react/react/pull/35612) and a `RangeError` from exponential debug info growth [#37481](https://github.com/react/react/pull/37481)
+
+For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md).
+
+---
+
+_Thanks to [Sam Selikoff](https://x.com/samselikoff) for writing this post, and to [Matt Carroll](https://mattcarrollcode.com/), [Dan Abramov](https://bsky.app/profile/danabra.mov), and [Andrew Clark](https://x.com/acdlite) for reviewing this post._
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index f49b80ab5..02d73ed40 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -16,6 +16,12 @@ Bluesky の [@react.dev](https://bsky.app/profile/react.dev) や Twitter の [@r
<div className="sm:-mx-5 flex flex-col gap-5 mt-12">
+<BlogCard title="React 19.3" date="September 9, 2026" url="/blog/2026/09/09/react-19-3">
+
+React 19.3 では、View Transition、フラグメントの ref、browser()、Trusted Types などの新機能が追加されました。この記事では…
+
+</BlogCard>
+
<BlogCard title="React Foundation: Linux Foundation がホストする React の新たな拠点" date="February 24, 2026" url="/blog/2026/02/24/the-react-foundation">
React Foundation が Linux Foundation のもとで正式に立ち上がりました。
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index e87160364..e5a82ba4c 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -25,6 +25,31 @@ October 21-23, 2026. In-person in Athens
[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+### React Advanced London 2026 {/*react-advanced-london-2026*/}
+October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/)
+
+### React Summit US 2026 {/*react-summit-us-2026*/}
+November 17 & 20, 2026. In-person in New York, USA + online (hybrid event)
+
+[Website](https://reactsummit.us/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+
+### React Day Berlin 2026 {/*react-day-berlin-2026*/}
+December 4 & 7, 2026. In-person in Berlin, Germany + online (hybrid event)
+
+[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) - [LinkedIn](https://www.linkedin.com/showcase/react-day-berlin/)
+
+### React Summit Asia 2027 {/*react-summit-asia-2027*/}
+April 15 & 19, 2027. In-person in Singapore + online (hybrid event)
+
+[Website](https://reactsummit.asia/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+
+### React Summit 2027 {/*react-summit-2027*/}
+May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+
## Past Conferences {/*past-conferences*/}
diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md
index 705d0f620..df0f053e8 100644
--- a/src/content/reference/react-compiler/directives.md
+++ b/src/content/reference/react-compiler/directives.md
@@ -195,4 +195,4 @@ For specific issues with directives, see the troubleshooting sections in:
* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure how the compiler chooses what to optimize
* [`Configuration`](/reference/react-compiler/configuration) - Full compiler configuration options
-* [React Compiler documentation](https://react.dev/learn/react-compiler) - Getting started guide
\ No newline at end of file
+* [React Compiler documentation](/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md
index 017da34e7..8b0090575 100644
--- a/src/content/reference/react-dom/browser.md
+++ b/src/content/reference/react-dom/browser.md
@@ -1,18 +1,9 @@
---
title: browser
-version: canary
---
<Intro>
-<Canary>
-
-**The `browser` API is currently only available in React’s Canary and Experimental channels.**
-
-[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
-
-</Canary>
-
`browser` lets you mark a component as browser-only during server rendering.
```js
@@ -56,7 +47,7 @@ During server rendering, `use(browser())` stops rendering the component and leav
#### Caveats {/*caveats*/}
* `use(browser())` must be inside a `<Suspense>` boundary during server rendering. Without one, the server render fails.
-* In a React Server Components app, `use(browser())` must be called from a [Client Component](/reference/rsc/use-client), not a [Server Component](/reference/rsc/server-components).
+* `use(browser())` must be called from a [Client Component](/reference/rsc/use-client), not a [Server Component](/reference/rsc/server-components).
* Calling `browser()` by itself has no effect. To mark a component as browser-only, pass the value returned by `browser` to `use`. Do not throw it.
---
@@ -198,8 +189,8 @@ iframe {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
},
"scripts": {
@@ -215,7 +206,7 @@ iframe {
<Note>
-In a React Server Components app, `use(browser())` must be called from a Client Component. If your framework uses Server Components by default, add the [`'use client'`](/reference/rsc/use-client) directive to that file or move the call to a child Client Component:
+`use(browser())` must be called from a Client Component. If your framework uses Server Components by default, add the [`'use client'`](/reference/rsc/use-client) directive to that file or move the call to a child Client Component:
```js {1}
'use client';
@@ -234,9 +225,153 @@ export default function SavedDraft() {
---
-### Conditionally rendering in the browser {/*conditionally-rendering-in-the-browser*/}
+### Conditionally rendering on the server {/*conditionally-rendering-on-the-server*/}
+
+Like other calls to [`use`](/reference/react/use), `use(browser())` can be called inside a conditional statement or after an early return. This lets a Component or custom Hook opt out of server rendering based on a condition, such as the value of a prop.
+
+For example, this `useTimeZone` Hook accepts an optional default value. When provided, React renders the default value in the initial HTML and in the browser. Without a default value, the Component suspends during server rendering and shows the device's local time zone in the browser.
+
+Click **Reload** to see the loading fallback before the user's time zone appears.
+
+<Sandpack>
+
+```js src/App.js
+import { Suspense } from 'react';
+import { useTimeZone } from './useTimeZone.js';
+
+function TimeZone({label, defaultTimeZone}) {
+ const timeZone = useTimeZone(defaultTimeZone);
+ return <p>{label}: <strong>{timeZone}</strong></p>;
+}
+
+export default function App() {
+ return (
+ <>
+ <h1>Event details</h1>
+ <TimeZone
+ label="Event time zone"
+ defaultTimeZone="America/New_York"
+ />
+ <Suspense fallback={<p>Loading your time zone...</p>}>
+ <TimeZone label="Your time zone" />
+ </Suspense>
+ </>
+ );
+}
+```
+
+```js src/useTimeZone.js active
+import { use } from 'react';
+import { browser } from 'react-dom';
+
+export function useTimeZone(defaultTimeZone) {
+ if (defaultTimeZone !== undefined) {
+ return defaultTimeZone;
+ }
+
+ use(browser('No default time zone was provided.'));
+ return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+```
+
+```js src/Document.js hidden
+import App from './App.js';
+
+export default function Document() {
+ return (
+ <html lang="en">
+ <head>
+ <title>Event details
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+```js src/Card.js
+export default function Card({ title }) {
+ return Scroll down
+
+ Scroll up
+ {title}
;
+}
+```
+
+```js src/InView.js
+import {
+ Fragment,
+ useRef,
+ useLayoutEffect,
+} from 'react';
+
+export default function InView({ onChange, children }) {
+ const fragmentRef = useRef(null);
+
+ useLayoutEffect(() => {
+ const visibleElements = new Set();
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach(e => {
+ if (e.isIntersecting) {
+ visibleElements.add(e.target);
+ } else {
+ visibleElements.delete(e.target);
+ }
+ });
+ onChange(visibleElements.size > 0);
+ }
+ );
+ const fragmentInstance = fragmentRef.current;
+ fragmentInstance.observeUsing(observer);
+ return () => {
+ fragmentInstance.unobserveUsing(observer);
+ };
+ }, [onChange]);
+
+ return (
+ {timeZone}
+} + +export default function App() { + return ( + <> +Your current time zone is:
+{defaultValue}
; + } + + use(browser()); + const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone; + + return{localTimeZone}
+} + +export default function App() { + return ( + <> +
+
+
+ The event's time zone is:
++ +
+
+
+
+
+ );
+}
+```
+
+
+```js src/Document.js hidden
+import App from './App.js';
+
+export default function Document() {
+ return (
+
+
+ Your current time zone is:
+