diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md index 382bc50b831..017da34e7d2 100644 --- a/src/content/reference/react-dom/browser.md +++ b/src/content/reference/react-dom/browser.md @@ -69,24 +69,47 @@ Call `browser` inside `use` in a component that should only render in the browse You can use this instead of checking `typeof window`, waiting for an [`Effect`](/reference/react/useEffect) to set mounted state, or using a framework option to disable server rendering. -Press **Render the page**. The loading fallback appears first. After a short delay, React hydrates the page and displays the browser-only editor. +Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`. ```js src/App.js active -import { Suspense, use } from 'react'; +import { Suspense, use, useState } from 'react'; import { browser } from 'react-dom'; -function BrowserOnlyEditor() { - use(browser('The editor requires browser APIs.')); - return ; +function SavedDraft() { + use(browser('The draft is stored in localStorage.')); + const [draft, setDraft] = useState( + () => localStorage.getItem('draft') ?? '' + ); + + function handleChange(event) { + const nextDraft = event.target.value; + setDraft(nextDraft); + localStorage.setItem('draft', nextDraft); + } + + return ( +