48:I[660678,["/_next/static/chunks/13vqyfldau57p.js","/_next/static/chunks/1gbl-dcot4vlq.js","/_next/static/chunks/3w7s_-pxil6pv.js","/_next/static/chunks/3zorfbfh_a_pd.js","/_next/static/chunks/0cnrn8dx8wpm6.js","/_next/static/chunks/2e4udl7tfg2xd.js","/_next/static/chunks/1mbdq0lktamc7.js","/_next/static/chunks/0nq310uz96h4-.js","/_next/static/chunks/2i4xo8xu-dpuk.js","/_next/static/chunks/40fmu66fmb8tm.js","/_next/static/chunks/3vehc-g2atkra.js","/_next/static/chunks/2a4jc680f5x-9.js","/_next/static/chunks/2wyk4b1ao4pa_.js","/_next/static/chunks/1gth09_ur0iam.js","/_next/static/chunks/0ugk39ckud30x.js","/_next/static/chunks/0pp6seif9t0rh.js","/_next/static/chunks/3bhq66ea_v7by.js","/_next/static/chunks/44c_5nh0vyeb5.js","/_next/static/chunks/1jiredr0b6jr_.js","/_next/static/chunks/0r86cplnpkdza.js","/_next/static/chunks/2ghxk472-g0i6.js","/_next/static/chunks/1ra7jqz5hyzln.js","/_next/static/chunks/42kj-we3o-c3u.js","/_next/static/chunks/2vvl77bxv5nze.js","/_next/static/chunks/2dk9hti1hh4ut.js","/_next/static/chunks/2l8l4_a9-xhts.js","/_next/static/chunks/1qsa_rj-5yj90.js","/_next/static/chunks/0ewjxq-e6quq-.js","/_next/static/chunks/34y7-26s89h2f.js","/_next/static/chunks/0ojgzwcpt7vsk.js","/_next/static/chunks/3enqpgm3pn7at.js","/_next/static/chunks/3-906s1ue5fj3.js","/_next/static/chunks/2t_5zfez2-77k.js","/_next/static/chunks/2641m2aqdum9a.js","/_next/static/chunks/1cvej8ocaz0a2.js","/_next/static/chunks/1j29bqcxcpyur.js"],"HydrationBoundary"] 47:Ta39,{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://app.codemod.com/registry#website","url":"https://app.codemod.com/registry","name":"Codemod Registry"},{"@type":"Organization","@id":"https://app.codemod.com#org","name":"Mohamad Mohebifar","url":"https://app.codemod.com","logo":"https://avatars.githubusercontent.com/u/6104558?v=4"},{"@type":"BreadcrumbList","@id":"https://app.codemod.com/registry/react-19-3-use-browser#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Registry","item":"https://app.codemod.com/registry"},{"@type":"ListItem","position":2,"name":"react-19-3-use-browser","item":"https://app.codemod.com/registry/react-19-3-use-browser"}]},{"@type":"WebPage","@id":"https://app.codemod.com/registry/react-19-3-use-browser#webpage","url":"https://app.codemod.com/registry/react-19-3-use-browser","name":"react-19-3-use-browser - Codemod Registry","description":"Replace the mounted-state pattern for browser-only components with use(browser()) from react-dom","isPartOf":{"@id":"https://app.codemod.com/registry#website"},"author":{"@id":"https://app.codemod.com#org"},"breadcrumb":{"@id":"https://app.codemod.com/registry/react-19-3-use-browser#breadcrumb"},"mainEntity":{"@id":"https://app.codemod.com/registry/react-19-3-use-browser#sourcecode"}},{"@type":"SoftwareSourceCode","@id":"https://app.codemod.com/registry/react-19-3-use-browser#sourcecode","name":"react-19-3-use-browser","description":"Replace the mounted-state pattern for browser-only components with use(browser()) from react-dom","url":"https://app.codemod.com/registry/react-19-3-use-browser","publisher":{"@id":"https://app.codemod.com#org"},"image":"https://avatars.githubusercontent.com/u/6104558?v=4","isAccessibleForFree":true,"license":"MIT","codeRepository":"https://github.com/codemod/react-codemod/tree/main/codemods/use-browser","version":"0.1.1","keywords":["React","browser","SSR","Suspense"],"datePublished":"2026-09-10 19:59:28.211034+00","dateModified":"2026-09-10 19:59:28.211034+00"},{"@type":"SoftwareApplication","@id":"https://app.codemod.com/registry/react-19-3-use-browser#app","name":"react-19-3-use-browser codemod","description":"Replace the mounted-state pattern for browser-only components with use(browser()) from react-dom","url":"https://app.codemod.com/registry/react-19-3-use-browser","publisher":{"@id":"https://app.codemod.com#org"},"softwareVersion":"0.1.1","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}}]}49:T87e,# react-19-3-use-browser Replace the "wait until mounted" pattern for browser-only components with React 19.3's `use(browser())` from `react-dom`. The codemod looks for function components that contain all three of these statements at the top level of their body: 1. `const [mounted, setMounted] = useState(false);` 2. `useEffect(() => { setMounted(true); }, []);` (or `useLayoutEffect`) 3. `if (!mounted) return ;` (or `return null;`) It removes the state and effect, calls `use(browser())` in their place, and splits the component in two so the old early-return value becomes a `` fallback. On the server the fallback is rendered into the HTML exactly like before, and in the browser the component renders in a single pass instead of rendering the fallback first and re-rendering after an effect. ## Usage ```bash npx codemod react-19-3-use-browser --target ``` ## Example ```tsx // Before import { useEffect, useState } from "react"; export function LocalClock({ format }: { format: string }) { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return ; return {formatNow(format)}; } // After import { Suspense, use } from "react"; import { browser } from "react-dom"; export function LocalClock(props: { format: string }) { return ( }> ); } function LocalClockBrowserOnly({ format }: { format: string }) { use(browser()); return {formatNow(format)}; } ``` ## What is left alone - Components where the `mounted` flag or its setter is used anywhere else, since removing the state would change behavior. - Components whose fallback expression references destructured props, because the fallback moves into the wrapper component. - `typeof window` checks and framework helpers such as `dynamic(..., { ssr: false })`. Those need a hand review. - CommonJS files and files without an ES module import of `react`. - Unused `useState` / `useEffect` imports are removed when nothing else in the file references them. 19:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$47"}}],["$","$L48",null,{"state":{"mutations":[],"queries":[{"state":{"data":{"json":{"id":"962361b3-ec94-4b91-90d3-6ba5a635f16c","name":"react-19-3-use-browser","displayName":"react-19-3-use-browser","description":"Replace the mounted-state pattern for browser-only components with use(browser()) from react-dom","scope":null,"visibility":"public","downloadCount":0,"executionCount":0,"createdAt":"2026-09-10 19:59:28.211034+00","updatedAt":"2026-09-10 19:59:28.211034+00","latestVersion":"0.1.1","keywords":["React","browser","SSR","Suspense"],"starCount":0,"author":"Codemod ","homepage":null,"repository":"https://github.com/codemod/react-codemod/tree/main/codemods/use-browser","license":"MIT","access":"public","documentation":null,"bugsUrl":null,"readme":"$49","organization":{"id":null,"name":null,"slug":null,"avatarUrl":null},"owner":{"id":"60be2aab-7f92-4158-b1ba-ee62555b75f0","username":"mohebifar","name":"Mohamad Mohebifar","avatarUrl":"https://avatars.githubusercontent.com/u/6104558?v=4"},"isLegacy":false,"versions":[{"version":{"id":"aa54ef12-cb72-47f4-8d9d-6ce2eaf77e30","packageId":"962361b3-ec94-4b91-90d3-6ba5a635f16c","version":"0.1.1","description":"Replace the mounted-state pattern for browser-only components with use(browser()) from react-dom","manifest":{"name":"react-19-3-use-browser","author":"Codemod ","license":"MIT","targets":{"versions":{},"languages":["tsx"],"frameworks":[]},"version":"0.1.1","keywords":["React","browser","SSR","Suspense"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","repository":"https://github.com/codemod/react-codemod/tree/main/codemods/use-browser","description":"Replace the mounted-state pattern for browser-only components with use(browser()) from react-dom","dependencies":[],"schema_version":"1.0"},"checksum":"957fcf65719fa03a0f858ca5aee4096e0b23aa0f72d174fc7c4dc0fc8e70bc31","size":9563,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/react-19-3-use-browser/0.1.1/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"languages":["typescript"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Replace mounted-state browser-only components with use(browser())","type":"js-ast-grep","metrics":[{"name":"use-browser-transformations","cardinalityKeys":["file"]}],"language":"tsx","semanticAnalysis":"file"}]}],"metricMetadataVersion":1},"validated":false,"validationErrors":null,"publishedBy":"60be2aab-7f92-4158-b1ba-ee62555b75f0","deprecated":false,"deprecationMessage":null,"downloadCount":0,"cachedTestCases":{"input":"import { useEffect, useState, type FC } from 'react';\nimport { Skeleton } from './skeleton';\n\nexport const Viewport: FC<{ label: string }> = ({ label }) => {\n const [hasMounted, setHasMounted] = useState(false);\n useEffect(() => {\n setHasMounted(true);\n }, []);\n if (hasMounted === false) return ;\n return (\n

\n {label}: {window.innerWidth}px\n

\n );\n};\n","output":"import { type FC, Suspense, use } from 'react';\nimport { browser } from 'react-dom';\nimport { Skeleton } from './skeleton';\n\nexport const Viewport: FC<{ label: string }> = (props) => {\n return (\n }>\n \n \n );\n};\n\nconst ViewportBrowserOnly: FC<{ label: string }> = ({ label }) => {\n use(browser());\n return (\n

\n {label}: {window.innerWidth}px\n

\n );\n};\n","isValid":true,"examples":[{"name":"arrow-component-with-fc-type","path":"tests/arrow-component-with-fc-type","input":"import { useEffect, useState, type FC } from 'react';\nimport { Skeleton } from './skeleton';\n\nexport const Viewport: FC<{ label: string }> = ({ label }) => {\n const [hasMounted, setHasMounted] = useState(false);\n useEffect(() => {\n setHasMounted(true);\n }, []);\n if (hasMounted === false) return ;\n return (\n

\n {label}: {window.innerWidth}px\n

\n );\n};\n","filename":"input.tsx"},{"name":"destructured-props-function","path":"tests/destructured-props-function","input":"import { useEffect, useState } from \"react\";\nimport { ClockSkeleton, formatNow } from \"./clock\";\n\nexport function LocalClock({ format }: { format: string }) {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setMounted(true);\n }, []);\n if (!mounted) return ;\n return {formatNow(format)};\n}\n","output":"import { Suspense, use } from \"react\";\nimport { browser } from \"react-dom\";\nimport { ClockSkeleton, formatNow } from \"./clock\";\n\nexport function LocalClock(props: { format: string }) {\n return (\n }>\n \n \n );\n}\n\nfunction LocalClockBrowserOnly({ format }: { format: string }) {\n use(browser());\n return {formatNow(format)};\n}\n","filename":"input.tsx"},{"name":"existing-imports","path":"tests/existing-imports","input":"import { Suspense, use, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport function Portal({ children }) {\n const [ready, setReady] = useState(false);\n useEffect(() => {\n setReady(true);\n }, []);\n if (!ready) return null;\n return createPortal(children, document.body);\n}\n","output":"import { Suspense, use } from \"react\";\nimport { createPortal, browser } from \"react-dom\";\n\nexport function Portal(props) {\n return (\n \n \n \n );\n}\n\nfunction PortalBrowserOnly({ children }) {\n use(browser());\n return createPortal(children, document.body);\n}\n","filename":"input.tsx"},{"name":"export-default-props-identifier","path":"tests/export-default-props-identifier","input":"import React, { useState, useEffect } from \"react\";\nimport { readTheme } from \"./theme\";\n\nexport default function ThemeBadge(props) {\n const [isClient, setIsClient] = useState(false);\n useEffect(() => setIsClient(true), []);\n if (!isClient) {\n return null;\n }\n return {readTheme()};\n}\n","output":"import React, { Suspense, use } from \"react\";\nimport { browser } from \"react-dom\";\nimport { readTheme } from \"./theme\";\n\nexport default function ThemeBadge(props) {\n return (\n \n \n \n );\n}\n\nfunction ThemeBadgeBrowserOnly(props) {\n use(browser());\n return {readTheme()};\n}\n","filename":"input.tsx"},{"name":"fallback-uses-prop-no-change","path":"tests/fallback-uses-prop-no-change","input":"import { useEffect, useState } from \"react\";\n\nexport function Avatar({ size }: { size: number }) {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setMounted(true);\n }, []);\n if (!mounted) return

;\n return

;\n}\n","output":"import { useEffect, useState } from \"react\";\n\nexport function Avatar({ size }: { size: number }) {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setMounted(true);\n }, []);\n if (!mounted) return

;\n return

;\n}\n","filename":"input.tsx"},{"name":"layout-effect-keeps-used-hooks","path":"tests/layout-effect-keeps-used-hooks","input":"import { useLayoutEffect, useState, useEffect } from \"react\";\n\nfunction Left() {\n const [mounted, setMounted] = useState(false);\n useLayoutEffect(() => {\n setMounted(true);\n }, []);\n if (!mounted) {\n return

;\n }\n return

{screen.width}

;\n}\n\nexport function Right() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n setCount((c) => c + 1);\n }, []);\n return

{count}

;\n}\n\nexport default function Layout() {\n return (\n <>\n \n \n \n );\n}\n","output":"import { useState, useEffect, Suspense, use } from \"react\";\nimport { browser } from \"react-dom\";\n\nfunction Left() {\n return (\n Loading

}>\n \n \n );\n}\n\nfunction LeftBrowserOnly() {\n use(browser());\n return

{screen.width}

;\n}\n\nexport function Right() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n setCount((c) => c + 1);\n }, []);\n return

{count}

;\n}\n\nexport default function Layout() {\n return (\n <>\n \n \n \n );\n}\n","filename":"input.tsx"},{"name":"namespace-hooks","path":"tests/namespace-hooks","input":"import * as React from \"react\";\n\nfunction Widget() {\n const [mounted, setMounted] = React.useState(false);\n React.useEffect(() => {\n setMounted(true);\n }, []);\n if (!mounted) return null;\n return

{navigator.language}

;\n}\n\nexport { Widget };\n","output":"import * as React from \"react\";\nimport { browser } from \"react-dom\";\n\nfunction Widget() {\n return (\n \n \n \n );\n}\n\nfunction WidgetBrowserOnly() {\n React.use(browser());\n return

{navigator.language}

;\n}\n\nexport { Widget };\n","filename":"input.tsx"},{"name":"no-react-import-no-change","path":"tests/no-react-import-no-change","input":"import { useEffect, useState } from \"preact/hooks\";\n\nexport function Panel() {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setMounted(true);\n }, []);\n if (!mounted) return null;\n return

ready

;\n}\n","output":"import { useEffect, useState } from \"preact/hooks\";\n\nexport function Panel() {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setMounted(true);\n }, []);\n if (!mounted) return null;\n return

ready

;\n}\n","filename":"input.tsx"},{"name":"state-used-elsewhere-no-change","path":"tests/state-used-elsewhere-no-change","input":"import { useEffect, useState } from \"react\";\n\nexport function Panel() {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setMounted(true);\n }, []);\n if (!mounted) return null;\n return

ready

;\n}\n","output":"import { useEffect, useState } from \"react\";\n\nexport function Panel() {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setMounted(true);\n }, []);\n if (!mounted) return null;\n return

ready

;\n}\n","filename":"input.tsx"}]},"defaultWorkflowName":"default","createdAt":"2026-09-10T19:59:28.211Z","updatedAt":"2026-09-10 19:59:28.950534+00"},"publishedBy":{"id":"60be2aab-7f92-4158-b1ba-ee62555b75f0","username":"mohebifar","name":"Mohamad Mohebifar"},"insightsTemplate":{"packageVersionId":"aa54ef12-cb72-47f4-8d9d-6ce2eaf77e30","status":"ready","generatedAt":"2026-09-10T19:59:42.247Z"},"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Replace mounted-state browser-only components with use(browser())","type":"js-ast-grep","metrics":[{"name":"use-browser-transformations","cardinalityKeys":["file"]}],"language":"tsx","semanticAnalysis":"file"}]}],"metricMetadataVersion":1}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[{"id":"a96a6fc0-87c7-4805-975f-d7463dad8350","parentWorkflowName":"default","parentNodeId":"react-19-3-migration","parentStepId":null,"parentStepName":"Replace mounted-state browser-only components with use(browser())","childSourceRaw":"react-19-3-use-browser","childWorkflowName":null,"resolutionKind":"registry","resolutionReason":null,"resolutionMessage":null,"isDirect":true,"createdAt":"2026-09-10T19:59:50.123Z","updatedAt":"2026-09-10 19:59:50.123564+00","parentPackage":{"id":"6e798c5d-e600-44a1-9ade-c9be5884f35e","name":"react-19-3-migration-recipe","displayName":"react-19-3-migration-recipe","description":"Run all React 19.3 adoption codemods in sequence","scope":null,"visibility":"public","access":"public","latestVersion":"0.1.1","author":"Codemod "},"parentPackageVersion":{"id":"5655db60-b9e8-48ca-b346-7884ee9f9b1e","packageId":"6e798c5d-e600-44a1-9ade-c9be5884f35e","version":"0.1.1"}}]}],"distTags":{"latest":"0.1.1"},"latestPackageBehavior":"workflow-only","cachedTestCases":"$19:1:props:state:queries:0:state:data:json:versions:0:version:cachedTestCases"},"meta":{"values":{"versions.0.version.createdAt":["Date"],"versions.0.insightsTemplate.generatedAt":["Date"],"versions.0.parentBundles.0.createdAt":["Date"]},"referentialEqualities":{"cachedTestCases":["versions.0.version.cachedTestCases"]}}},"dataUpdateCount":1,"dataUpdatedAt":1789093473373,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["registry","getPackage"],{"input":{"name":"react-19-3-use-browser","scope":"$undefined"},"type":"query"}],"queryHash":"[[\"registry\",\"getPackage\"],{\"input\":{\"name\":\"react-19-3-use-browser\"},\"type\":\"query\"}]"}]},"children":"$L4a"}]] 1c:null 20:[["$","title","0",{"children":"react-19-3-use-browser - Codemod Registry"}],["$","meta","1",{"name":"description","content":"Replace the mounted-state pattern for browser-only components with use(browser()) from react-dom"}],["$","meta","2",{"name":"author","content":"Mohamad Mohebifar"}],["$","meta","3",{"name":"keywords","content":"react-19-3-use-browser, codemod, code transformation, automated refactoring, package, registry, React, browser, SSR, Suspense"}],["$","meta","4",{"name":"creator","content":"Mohamad Mohebifar"}],["$","meta","5",{"name":"publisher","content":"Codemod"}],["$","meta","6",{"name":"robots","content":"index, follow"}],["$","meta","7",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","8",{"name":"application-name","content":"Codemod Registry"}],["$","meta","9",{"name":"apple-mobile-web-app-title","content":"Codemod"}],["$","meta","10",{"name":"apple-mobile-web-app-capable","content":"yes"}],["$","meta","11",{"name":"apple-mobile-web-app-status-bar-style","content":"default"}],["$","meta","12",{"name":"format-detection","content":"telephone=no"}],["$","meta","13",{"name":"mobile-web-app-capable","content":"yes"}],["$","meta","14",{"name":"msapplication-config","content":"/browserconfig.xml"}],["$","meta","15",{"name":"msapplication-TileColor","content":"#000000"}],["$","meta","16",{"name":"msapplication-tap-highlight","content":"no"}],["$","meta","17",{"name":"theme-color","content":"#000000"}],["$","meta","18",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}],["$","link","19",{"rel":"canonical","href":"https://app.codemod.com/registry/react-19-3-use-browser"}],["$","meta","20",{"property":"og:title","content":"react-19-3-use-browser - Codemod Registry"}],["$","meta","21",{"property":"og:description","content":"Replace the mounted-state pattern for browser-only components with use(browser()) from react-dom"}],["$","meta","22",{"property":"og:url","content":"https://app.codemod.com/registry/react-19-3-use-browser"}],["$","meta","23",{"property":"og:site_name","content":"Codemod Registry"}],["$","meta","24",{"property":"og:locale","content":"en_US"}],["$","meta","25",{"property":"og:image","content":"https://app.codemod.com/api/og/registry/react-19-3-use-browser"}],["$","meta","26",{"property":"og:image:width","content":"1200"}],["$","meta","27",{"property":"og:image:height","content":"630"}],["$","meta","28",{"property":"og:image:alt","content":"react-19-3-use-browser package"}],["$","meta","29",{"property":"og:type","content":"website"}],["$","meta","30",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","31",{"name":"twitter:site","content":"@codemod"}],["$","meta","32",{"name":"twitter:creator","content":"@codemod"}],["$","meta","33",{"name":"twitter:title","content":"react-19-3-use-browser - Codemod Registry"}],["$","meta","34",{"name":"twitter:description","content":"Replace the mounted-state pattern for browser-only components with use(browser()) from react-dom"}],["$","meta","35",{"name":"twitter:image","content":"https://app.codemod.com/api/og/registry/react-19-3-use-browser"}]]