--- title: React 19.3's browser() API and ten features that let you... description: React 19.3 shipped on npm September 9, headlined by a new browser() API in react-dom that replaces hydration-mismatch workarounds like mounted flags and typeof... canonical: https://daily.dev/posts/react-19-3-s-browser-api-and-ten-features-that-let-you-delete-old-code-drflu5suj twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: React 19.3's browser() API and ten features that let you delete old code | daily.dev og:description: React 19.3 shipped on npm September 9, headlined by a new browser() API in react-dom that replaces hydration-mismatch workarounds like mounted flags and typeof... og:url: https://daily.dev/posts/react-19-3-s-browser-api-and-ten-features-that-let-you-delete-old-code-drflu5suj og:image: https://api.daily.dev/og/posts/dRFlU5suJ.png og:image:alt: React 19.3's browser() API and ten features that let you delete old code og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # React 19.3's browser() API and ten features that let you delete old code **[Collections](https://daily.dev/sources/collections)** · 3 min read · 27 upvotes · 1 comments ## Summary React 19.3 shipped on npm September 9, headlined by a new browser() API in react-dom that replaces hydration-mismatch workarounds like mounted flags and typeof window checks, plus stable View Transitions and Fragment Refs. browser() works with use() to suspend components on the server and render after hydration, requires a Suspense boundary, and remains Canary-only. The piece also walks through ten patterns—covering Server Components, fullscreen events, onReset, resize batching, CSS anchor positioning, field-sizing, and sibling-index()—that let developers delete older workarounds, alongside caveats about lagging TypeScript types and image timeout behavior in ViewTransition with Suspense. ## Content React 19.3 is on npm. Three experimental features are now stable or newly named, and together with some recent browser CSS they let you drop a fair amount of boilerplate. ## What shipped ### browser() The new `browser()` API in `react-dom` lets a component formally opt out of server-side rendering. Pair it with `use()` and the component suspends on the server, then renders normally after hydration. That replaces the usual mounted-flag or `typeof window` checks, which are a common source of hydration mismatches. A few rules apply: - Call it from a Client Component inside a Suspense boundary. - It supports conditional data fetching. - An `onBrowserBailout` callback lets you report skipped server renders. Frameworks already have escape hatches for this, such as Next.js's `next/dynamic` with `ssr: false` and Astro's `client:only`. `browser()` narrows that gap and works with any SSR setup. One caution: it is still Canary-only, so check your release channel before relying on it in production. ### ViewTransition The `` component is now stable. It animates UI changes tied to React's rendering and supports enter, exit, update and share transitions. It also works with Suspense boundaries. ### Fragment Refs You can now attach a ref directly to a Fragment. The ref gives you a `FragmentInstance` with methods such as `focus`, `observeUsing` and `scrollIntoView`, so you no longer need a wrapper div just to get a handle on a group of nodes. The release also adds context support for Server Components and Trusted Types support. These additions complement animation libraries, semantic HTML wrappers and server rendering. They don't replace them. ## Ten patterns you can delete A side-by-side test built each of these twice, the old way and the new way, and counted lines. The browsers involved were Chrome 154, Firefox 147/152/154 and Safari 26.6.2. 1. **Context in Server Components.** Server Components can render context directly, so the workaround goes away. 2. **Suspense instead of mounted flags.** Combined with `browser()`, a Suspense boundary replaces the `useEffect` plus `useState` mounted-flag pattern. 3. **Stable Fragment Refs.** No more wrapper divs added only to hold a ref. 4. **Fullscreen event props.** Fullscreen events can be handled as props rather than manual listeners. 5. **`onReset` after form actions.** It now fires after a form action, so you don't need to wire up resets by hand. 6. **Resize batching.** React batches resize updates, which removes the need for `requestAnimationFrame` throttling. 7. **ViewTransition with Suspense for images.** Image loading can animate in without custom code. 8. **CSS anchor positioning.** It replaces Floating UI for many tooltip and popover cases. 9. **`field-sizing: content`.** An auto-growing textarea no longer needs an effect. 10. **`sibling-index()`.** Stagger animations don't need manually passed indices. ## Caveats - TypeScript types lag behind some of the new event props, so expect to patch or cast for now. - React abandons slow-loading images after a timeout when they are used with ViewTransition and Suspense. - Browser support varies by feature, so check the versions above before deleting a fallback. ## Questions this post answers ### What does the browser() API do in React 19.3? The browser() API in React 19.3 lets a component suspend on the server and render normally only after hydration, replacing manual mounted-flag or typeof window hydration-mismatch workarounds. It must be called from a Client Component inside a Suspense boundary, pairs with use(), supports conditional data fetching, and includes an onBrowserBailout callback to report skipped server renders. It remains Canary-only. _Track experimental React APIs like browser() on daily.dev before they land in a stable release._ ### Is React's browser() API stable in React 19.3 or only in Canary? It is Canary-only in React 19.3, released on npm September 9. Developers should confirm their release channel before relying on it in production, since it has not been promoted to the stable channel yet despite being the headline addition alongside stable View Transitions and Fragment Refs. _Developers choosing when to adopt Canary-only React features can follow release status on daily.dev._ ### What happens to slow-loading images when using React ViewTransition with Suspense? React abandons slow-loading images after a timeout when ViewTransition is combined with Suspense for image loading, so not every image is guaranteed to participate in the transition. This matters when building smooth image swap animations, since developers should not assume a slow network will still produce the intended transition effect. _Engineers building animated image transitions can watch for edge-case timeout behavior like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@apperside** · 0 upvotes > That's a huuuuge improvement!! Sorry, now I have to go deleting a lot of boilerplate code!! 💪 ## Similar posts on daily.dev - [React 19.3 – React](https://daily.dev/posts/react-19-3-react-sfqiftbgy) · React · 209 upvotes · 27 comments - [React’s ViewTransition Element – Frontend Masters Blog](https://daily.dev/posts/react-s-viewtransition-element-frontend-masters-blog-2rrseyrvd) · Frontend Masters · 5 upvotes · 0 comments - [This Week In React \#287: Fragment ref, React Compiler, StyleX, React Router, cnfast, Base UI, Remotion, React Aria](https://daily.dev/posts/this-week-in-react-287-fragment-ref-react-compiler-stylex-react-router-cnfast-base-ui-remoti-4pqbvvbmp) · This Week In React · 24 upvotes · 3 comments --- Tags: [#react](https://daily.dev/tags/react), [#css](https://daily.dev/tags/css), [#view-transitions](https://daily.dev/tags/view-transitions) [View this post on daily.dev](https://daily.dev/posts/react-19-3-s-browser-api-and-ten-features-that-let-you-delete-old-code-drflu5suj) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"React 19.3's browser() API and ten features that let you delete old code","url":"https://daily.dev/posts/react-19-3-s-browser-api-and-ten-features-that-let-you-delete-old-code-drflu5suj","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/react-19-3-s-browser-api-and-ten-features-that-let-you-delete-old-code-drflu5suj"},"datePublished":"2026-10-16T10:54:35.293Z","dateModified":"2026-10-17T22:39:32.384Z","description":"React 19.3 shipped on npm September 9, headlined by a new browser() API in react-dom that replaces hydration-mismatch workarounds like mounted flags and typeof...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4426c4f5bb4e27cc6b8798c66efdfd54?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4426c4f5bb4e27cc6b8798c66efdfd54?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Collections","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Collections","logo":"https://media.daily.dev/image/upload/s--fk_6ycEi--/f_auto,q_auto/v1780996001/logos/collections?_a=BAMAMiWQ0","url":"https://daily.dev/sources/collections"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/react-19-3-s-browser-api-and-ten-features-that-let-you-delete-old-code-drflu5suj","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":27},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"react,css,view-transitions","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Collections","item":"https://daily.dev/sources/collections"},{"@type":"ListItem","position":3,"name":"React 19.3's browser() API and ten features that let you delete old code"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/react-19-3-s-browser-api-and-ten-features-that-let-you-delete-old-code-drflu5suj","comment":[{"@type":"Comment","text":"That’s a huuuuge improvement!! Sorry, now I have to go deleting a lot of boilerplate code!! 💪","datePublished":"2026-10-18T01:53:30.708Z","url":"https://daily.dev/posts/dRFlU5suJ#c-3Y3y5ooc2","author":{"@type":"Person","name":"Apperside","url":"https://daily.dev/apperside","image":"https://avatars.githubusercontent.com/u/5955338?v=4"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/react-19-3-s-browser-api-and-ten-features-that-let-you-delete-old-code-drflu5suj#faq","mainEntity":[{"@type":"Question","name":"What does the browser() API do in React 19.3?","acceptedAnswer":{"@type":"Answer","text":"The browser() API in React 19.3 lets a component suspend on the server and render normally only after hydration, replacing manual mounted-flag or typeof window hydration-mismatch workarounds. It must be called from a Client Component inside a Suspense boundary, pairs with use(), supports conditional data fetching, and includes an onBrowserBailout callback to report skipped server renders. It remains Canary-only. Track experimental React APIs like browser() on daily.dev before they land in a stable release."}},{"@type":"Question","name":"Is React's browser() API stable in React 19.3 or only in Canary?","acceptedAnswer":{"@type":"Answer","text":"It is Canary-only in React 19.3, released on npm September 9. Developers should confirm their release channel before relying on it in production, since it has not been promoted to the stable channel yet despite being the headline addition alongside stable View Transitions and Fragment Refs. Developers choosing when to adopt Canary-only React features can follow release status on daily.dev."}},{"@type":"Question","name":"What happens to slow-loading images when using React ViewTransition with Suspense?","acceptedAnswer":{"@type":"Answer","text":"React abandons slow-loading images after a timeout when ViewTransition is combined with Suspense for image loading, so not every image is guaranteed to participate in the transition. This matters when building smooth image swap animations, since developers should not assume a slow network will still produce the intended transition effect. Engineers building animated image transitions can watch for edge-case timeout behavior like this on daily.dev."}}]} ```