Sync with react.dev @ 27d86ff (#491)

react-translations-bot · mrbadri · kosh-jp · web-flow · commit e7084bcd16de · 2025-09-21T10:57:41.000-07:00
* fix: correct overlay highlighting in code examples (#7669) * fix: the value property of checkbox to the checked property (#7804) * No need for useState here — useCounter handles the state internally (#7803) * docs: fix misplaced prepositional phrase error (#7799) * Fix wrong documentation for effect events (#7800) * Fix wrong documentation for effect events * Update src/content/learn/separating-events-from-effects.md --------- Co-authored-by: Ricky <rickhanlonii@gmail.com> * Remove stray console.log and image (#7814) * fix(template): remove unnecessary import of React in template code (#7750) * fix(reference): correct singular form of 'Server Functions' to 'Server Function' (#7749) * Add bold mono font (#7815) --------- Co-authored-by: Nicolas Ettlin <nicolas.ettlin@me.com> * Remove TODO comments and convert them to issues (#7743) * Remove TODO comment and convert to an issue for react-test-renderer * Remove TODO comment and convert to an issue for react-dom/test-utils * Add example of `useActionState` handling execution order (#7733) * docs: update vite link (#7784) * docs: add bsky link (#7781) * docs: add bsky link rename twitter to x * Update src/content/community/index.md --------- Co-authored-by: Ricky <rickhanlonii@gmail.com> * React Montreal Meetings have a new link (#7809) * fix: remove useless content (#6615) * fix: wrong verb tense in doc (#7818) * fix: typo in challenge solution (#7816) * Use experiemental in all uEE doc sandboxes (#7820) * Author: Josh Story <story@hey.com> Date: 2025-05-21 11:01:46 -0700 clarify the nonce and signal options for prerender docs clarifies why nonce is not an option for prerender APIs. clarifies how you would use signal to abort a prerender with in page documentation * Fix wrong explanation in preserving-and-resetting-state (#6043) * fix: correct broken WAI-ARIA modal dialog link in createPortal reference (#7833) * fix link from ARIA dialog-modal * chore: trigger CLA recheck * Update meetups.md adding React Rajasthan Community (#7831) Adding the React Community for Rajasthan India * Update components-and-hooks-must-be-pure.md (#7830) Some grammar fixes, and language clarifications * Update referencing-values-with-refs.md (#7829) Fixed invalid URL * Add uwu click animation (#7822) * Fix typo and clarily that a server function reference is created only when that function is used by a Client Component (#7746) * Add React Alicante 2025 to Conferences page (#7674) * fix: use const where applicable in examples for keeping components pure (#7819) * Remove `forwardRef` reference from API listing (#7837) This API is now under "Legacy APIs" and should probably no longer be listed as a "modern API". * docs: Refactor context provider usage (#7793) * delete provider * Fix NavContext usage in Talks component * Fix TocContext and LanguagesContext usage in Page component * Fix IllustrationContext usage in IllustrationBlock component * Fix LevelContext and TasksContext usage in managing-state.md * Fix ThemeContext and Context usage in MyApp component * Fix HighlightContext usage in List component * Fix ThemeContext usage in MyApp component * Fix ErrorDecoderContext usage in ErrorDecoderPage component * Fix ThemeContext usage in MyPage and MyApp components * Fix ThemeContext usage in MyApp component * Fix useContext documentation to correct context provider references * Fix context provider references in createContext documentation * prettier * Update src/content/reference/react/createContext.md --------- Co-authored-by: Ricky <rickhanlonii@gmail.com> * fix: typo in docs on prerendering (#7823) * Replace Context.Provider with Context (#7838) Update to be in line with the recommended way from React 19. Docs https://react.dev/blog/2024/12/05/react-19#context-as-a-provider --------- Co-authored-by: Ricky <rickhanlonii@gmail.com> * fix(blog): resolve typo in React 19 blog post (`refs` → `ref`s) (#7828) This PR corrects a small typo in the React documentation, changing "`refs`" to "`ref`s" for accuracy and consistency. * Update analyze_comment.yml (#7840) * Fix #6915: typo fix (#6917) * fix: update ids to point to right part of the docs (#7854) * chore: remove unused date-fns (#7856) * chore: fix typo in resource and metadata components documentation (#7006) * fix: correct typo in scaling-up-with-reducer-and-context.md (#7390) Fix typo in the 'Step 3: Use context anywhere in the tree' section by changing TaskContext to TasksContext for accuracy. * fix flushSync link (#7862) * docs(react): fix grammar in forward ref deprecation message (#7864) * [be] Add deadlinks script (#7879) While rewriting the compiler docs I happened to notice some deadlinks. This PR adds a new `yarn deadlinks` script to identify all deadlinks. I decided to make this a script for now for simplicity but in the future could be ported to an ESlint rule. The script handles: - [x] checks images correctly (images are stored in /public but links can omit the /public) - [x] looks up React error codes for dynamic error pages - [x] lints links to contributors and uses URL from acknowledgements page if the member is no longer active on the core team - [x] special injected anchor tags like #recap and #challenges Example: ``` yarn run v1.22.22 $ node scripts/deadLinkChecker.js Checking 177 markdown files... Fetched 552 React error codes src/content/learn/add-react-to-an-existing-project.md:23:58 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/add-react-to-an-existing-project.md:27:45 Link text: benefit from the best practices URL: /learn/start-a-new-react-project#can-i-use-react-without-a-framework ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/add-react-to-an-existing-project.md:152:269 Link text: a React framework URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/synchronizing-with-effects.md:735:18 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/typescript.md:16:3 Link text: Common types from `@types/react` URL: /learn/typescript/#useful-types ✗ Target file not found for: /learn/typescript/ src/content/learn/typescript.md:17:3 Link text: Further learning locations URL: /learn/typescript/#further-learning ✗ Target file not found for: /learn/typescript/ src/content/learn/typescript.md:23:5 Link text: production-grade React frameworks URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/you-might-not-need-an-effect.md:29:399 Link text: frameworks URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/you-might-not-need-an-effect.md:754:106 Link text: frameworks URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/your-first-component.md:218:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react/ViewTransition.md:146:248 Link text: reveal content URL: /link-to-suspense-below ✗ Target file not found for: /link-to-suspense-below src/content/reference/react/captureOwnerStack.md:60:94 Link text: `errorInfo.componentStack` in `onUncaughtError` URL: /reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors ✗ Anchor #show-a-dialog-for-uncaught-errors not found in reference/react-dom/client/hydrateRoot.md src/content/reference/react/forwardRef.md:9:65 Link text: here URL: /blog/2024/04/25/react-19#ref-as-a-prop ✗ Target file not found for: /blog/2024/04/25/react-19 src/content/reference/react/use.md:315:24 Link text: Server Component URL: /reference/react/components#server-components ✗ Anchor #server-components not found in reference/react/components.md src/content/reference/react/useEffect.md:899:67 Link text: if you use a framework, URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react/useEffect.md:1051:18 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react/useEffect.md:1736:92 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react/useInsertionEffect.md:136:65 Link text: non-blocking update, URL: /reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition ✗ Anchor #marking-a-state-update-as-a-non-blocking-transition not found in reference/react/useTransition.md src/content/reference/react-dom/createPortal.md:53:76 Link text: key. URL: /learn/rendering-lists/#keeping-list-items-in-order-with-key ✗ Target file not found for: /learn/rendering-lists/ src/content/reference/react-dom/index.md:24:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/index.md:51:3 Link text: `unmountComponentAtNode` URL: /reference/react-dom/unmountComponentAtNode ✗ Target file not found for: /reference/react-dom/unmountComponentAtNode src/content/reference/react-dom/preinit.md:7:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/preinitModule.md:7:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/preload.md:7:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/preloadModule.md:7:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/rsc/directives.md:13:36 Link text: bundlers compatible with React Server Components URL: /learn/start-a-new-react-project#full-stack-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/rsc/server-components.md:7:34 Link text: React Server Components URL: /learn/start-a-new-react-project#full-stack-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/rsc/server-functions.md:198:28 Link text: `useActionState` URL: /reference/react-dom/hooks/useFormState ✗ Target file not found for: /reference/react-dom/hooks/useFormState src/content/reference/rsc/server-functions.md:222:28 Link text: `useActionState` URL: /reference/react-dom/hooks/useFormState ✗ Target file not found for: /reference/react-dom/hooks/useFormState src/content/reference/rsc/use-client.md:44:77 Link text: compatible bundlers URL: /learn/start-a-new-react-project#full-stack-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/rsc/use-server.md:98:54 Link text: serializable props URL: /reference/rsc/use-client#passing-props-from-server-to-client-components ✗ Anchor #passing-props-from-server-to-client-components not found in reference/rsc/use-client.md src/content/reference/react-dom/client/createRoot.md:212:278 Link text: using a framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/client/index.md:7:185 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/components/common.md:919:89 Link text: check out more examples. URL: /reference/react/useRef#examples-dom ✗ Anchor #examples-dom not found in reference/react/useRef.md src/content/reference/react-dom/components/form.md:39:23 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/form.md:233:63 Link text: reference documentation URL: /reference/react/hooks/useOptimistic ✗ Target file not found for: /reference/react/hooks/useOptimistic src/content/reference/react-dom/components/input.md:33:24 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/link.md:33:23 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/meta.md:33:23 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/option.md:39:25 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/progress.md:33:27 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/script.md:34:25 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/select.md:39:25 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/style.md:33:24 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/textarea.md:33:27 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/title.md:33:24 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/server/index.md:7:182 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/static/index.md:7:146 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/blog/2023/03/16/introducing-react-dev.md:45:5 Link text: API Reference URL: /reference ✗ Target file not found for: /reference src/content/blog/2023/03/16/introducing-react-dev.md:610:117 Link text: Alternatives URL: /reference/react-dom/findDOMNode#alternatives ✗ Target file not found for: /reference/react-dom/findDOMNode src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:34:40 Link text: Next.js App Router URL: /learn/start-a-new-react-project#nextjs-app-router ✗ Target file not found for: /learn/start-a-new-react-project src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:95:605 Link text: Next.js App Router URL: /learn/start-a-new-react-project#nextjs-app-router ✗ Target file not found for: /learn/start-a-new-react-project src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md:110:3 Link text: Sathya Gunasekaran URL: /community/team#sathya-gunasekaran ✗ Contributor link should be updated to: https://github.com/gsathya src/content/blog/2024/04/25/react-19-upgrade-guide.md:132:20 Link text: improved how errors are handled URL: /blog/2024/04/25/react-19#error-handling ✗ Target file not found for: /blog/2024/04/25/react-19 src/content/blog/2024/04/25/react-19-upgrade-guide.md:502:19 Link text: `ref` as a prop URL: /blog/2024/04/25/react-19#ref-as-a-prop ✗ Target file not found for: /blog/2024/04/25/react-19 src/content/blog/2024/12/05/react-19.md:358:391 Link text: Full-stack React Architecture URL: /learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision ✗ Target file not found for: /learn/start-a-new-react-project src/content/blog/2024/12/05/react-19.md:392:28 Link text: React Server Actions URL: /reference/rsc/server-actions ✗ Target file not found for: /reference/rsc/server-actions src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md:2498:37 Link text: view transition classes URL: /reference/react/ViewTransition#view-transition-classes ✗ Anchor #view-transition-classes not found in reference/react/ViewTransition.md Found 58 dead links out of 1555 total links info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ``` * Fix deadlinks (#7880) * [be] Add deadlinks script While rewriting the compiler docs I happened to notice some deadlinks. This PR adds a new `yarn deadlinks` script to identify all deadlinks. I decided to make this a script for now for simplicity but in the future could be ported to an ESlint rule. The script handles: - [x] checks images correctly (images are stored in /public but links can omit the /public) - [x] looks up React error codes for dynamic error pages - [x] lints links to contributors and uses URL from acknowledgements page if the member is no longer active on the core team - [x] special injected anchor tags like #recap and #challenges Example: ``` yarn run v1.22.22 $ node scripts/deadLinkChecker.js Checking 177 markdown files... Fetched 552 React error codes src/content/learn/add-react-to-an-existing-project.md:23:58 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/add-react-to-an-existing-project.md:27:45 Link text: benefit from the best practices URL: /learn/start-a-new-react-project#can-i-use-react-without-a-framework ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/add-react-to-an-existing-project.md:152:269 Link text: a React framework URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/synchronizing-with-effects.md:735:18 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/typescript.md:16:3 Link text: Common types from `@types/react` URL: /learn/typescript/#useful-types ✗ Target file not found for: /learn/typescript/ src/content/learn/typescript.md:17:3 Link text: Further learning locations URL: /learn/typescript/#further-learning ✗ Target file not found for: /learn/typescript/ src/content/learn/typescript.md:23:5 Link text: production-grade React frameworks URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/you-might-not-need-an-effect.md:29:399 Link text: frameworks URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/you-might-not-need-an-effect.md:754:106 Link text: frameworks URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/learn/your-first-component.md:218:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react/ViewTransition.md:146:248 Link text: reveal content URL: /link-to-suspense-below ✗ Target file not found for: /link-to-suspense-below src/content/reference/react/captureOwnerStack.md:60:94 Link text: `errorInfo.componentStack` in `onUncaughtError` URL: /reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors ✗ Anchor #show-a-dialog-for-uncaught-errors not found in reference/react-dom/client/hydrateRoot.md src/content/reference/react/forwardRef.md:9:65 Link text: here URL: /blog/2024/04/25/react-19#ref-as-a-prop ✗ Target file not found for: /blog/2024/04/25/react-19 src/content/reference/react/use.md:315:24 Link text: Server Component URL: /reference/react/components#server-components ✗ Anchor #server-components not found in reference/react/components.md src/content/reference/react/useEffect.md:899:67 Link text: if you use a framework, URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react/useEffect.md:1051:18 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react/useEffect.md:1736:92 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react/useInsertionEffect.md:136:65 Link text: non-blocking update, URL: /reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition ✗ Anchor #marking-a-state-update-as-a-non-blocking-transition not found in reference/react/useTransition.md src/content/reference/react-dom/createPortal.md:53:76 Link text: key. URL: /learn/rendering-lists/#keeping-list-items-in-order-with-key ✗ Target file not found for: /learn/rendering-lists/ src/content/reference/react-dom/index.md:24:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/index.md:51:3 Link text: `unmountComponentAtNode` URL: /reference/react-dom/unmountComponentAtNode ✗ Target file not found for: /reference/react-dom/unmountComponentAtNode src/content/reference/react-dom/preinit.md:7:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/preinitModule.md:7:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/preload.md:7:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/preloadModule.md:7:1 Link text: React-based frameworks URL: /learn/start-a-new-react-project ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/rsc/directives.md:13:36 Link text: bundlers compatible with React Server Components URL: /learn/start-a-new-react-project#full-stack-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/rsc/server-components.md:7:34 Link text: React Server Components URL: /learn/start-a-new-react-project#full-stack-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/rsc/server-functions.md:198:28 Link text: `useActionState` URL: /reference/react-dom/hooks/useFormState ✗ Target file not found for: /reference/react-dom/hooks/useFormState src/content/reference/rsc/server-functions.md:222:28 Link text: `useActionState` URL: /reference/react-dom/hooks/useFormState ✗ Target file not found for: /reference/react-dom/hooks/useFormState src/content/reference/rsc/use-client.md:44:77 Link text: compatible bundlers URL: /learn/start-a-new-react-project#full-stack-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/rsc/use-server.md:98:54 Link text: serializable props URL: /reference/rsc/use-client#passing-props-from-server-to-client-components ✗ Anchor #passing-props-from-server-to-client-components not found in reference/rsc/use-client.md src/content/reference/react-dom/client/createRoot.md:212:278 Link text: using a framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/client/index.md:7:185 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/components/common.md:919:89 Link text: check out more examples. URL: /reference/react/useRef#examples-dom ✗ Anchor #examples-dom not found in reference/react/useRef.md src/content/reference/react-dom/components/form.md:39:23 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/form.md:233:63 Link text: reference documentation URL: /reference/react/hooks/useOptimistic ✗ Target file not found for: /reference/react/hooks/useOptimistic src/content/reference/react-dom/components/input.md:33:24 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/link.md:33:23 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/meta.md:33:23 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/option.md:39:25 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/progress.md:33:27 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/script.md:34:25 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/select.md:39:25 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/style.md:33:24 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/textarea.md:33:27 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/components/title.md:33:24 Link text: common element props. URL: /reference/react-dom/components/common#props ✗ Anchor #props not found in reference/react-dom/components/common.md src/content/reference/react-dom/server/index.md:7:182 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/reference/react-dom/static/index.md:7:146 Link text: framework URL: /learn/start-a-new-react-project#production-grade-react-frameworks ✗ Target file not found for: /learn/start-a-new-react-project src/content/blog/2023/03/16/introducing-react-dev.md:45:5 Link text: API Reference URL: /reference ✗ Target file not found for: /reference src/content/blog/2023/03/16/introducing-react-dev.md:610:117 Link text: Alternatives URL: /reference/react-dom/findDOMNode#alternatives ✗ Target file not found for: /reference/react-dom/findDOMNode src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:34:40 Link text: Next.js App Router URL: /learn/start-a-new-react-project#nextjs-app-router ✗ Target file not found for: /learn/start-a-new-react-project src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:95:605 Link text: Next.js App Router URL: /learn/start-a-new-react-project#nextjs-app-router ✗ Target file not found for: /learn/start-a-new-react-project src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md:110:3 Link text: Sathya Gunasekaran URL: /community/team#sathya-gunasekaran ✗ Contributor link should be updated to: https://github.com/gsathya src/content/blog/2024/04/25/react-19-upgrade-guide.md:132:20 Link text: improved how errors are handled URL: /blog/2024/04/25/react-19#error-handling ✗ Target file not found for: /blog/2024/04/25/react-19 src/content/blog/2024/04/25/react-19-upgrade-guide.md:502:19 Link text: `ref` as a prop URL: /blog/2024/04/25/react-19#ref-as-a-prop ✗ Target file not found for: /blog/2024/04/25/react-19 src/content/blog/2024/12/05/react-19.md:358:391 Link text: Full-stack React Architecture URL: /learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision ✗ Target file not found for: /learn/start-a-new-react-project src/content/blog/2024/12/05/react-19.md:392:28 Link text: React Server Actions URL: /reference/rsc/server-actions ✗ Target file not found for: /reference/rsc/server-actions src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md:2498:37 Link text: view transition classes URL: /reference/react/ViewTransition#view-transition-classes ✗ Anchor #view-transition-classes not found in reference/react/ViewTransition.md Found 58 dead links out of 1555 total links info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ``` * Fix deadlinks Following `yarn deadlinks` as a guide, I fixed the following deadlinks: | File | Link Text | Current URL | Issue Type | Actual Fix Applied | Status | |------|-----------|-------------|------------|-------------------|--------| | `add-react-to-an-existing-project.md:23` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed | | `add-react-to-an-existing-project.md:27` | benefit from the best practices | `/learn/start-a-new-react-project#can-i-use-react-without-a-framework` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `add-react-to-an-existing-project.md:152` | a React framework | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed | | `synchronizing-with-effects.md:735` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `typescript.md:16` | Common types from `@types/react` | `/learn/typescript/#useful-types` | Trailing slash | `/learn/typescript#useful-types` | ✅ Fixed | | `typescript.md:17` | Further learning locations | `/learn/typescript/#further-learning` | Trailing slash | `/learn/typescript#further-learning` | ✅ Fixed | | `typescript.md:23` | production-grade React frameworks | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `you-might-not-need-an-effect.md:29` | frameworks | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `you-might-not-need-an-effect.md:754` | frameworks | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `your-first-component.md:218` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed | | `ViewTransition.md:146` | reveal content | `/link-to-suspense-below` | Placeholder URL | `/reference/react/Suspense#revealing-content-together-at-once` | ✅ Fixed | | `captureOwnerStack.md:60` | `errorInfo.componentStack` in `onUncaughtError` | `/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors` | Missing anchor | `/reference/react-dom/client/hydrateRoot#error-logging-in-production` | ✅ Fixed | | `forwardRef.md:9` | here | `/blog/2024/04/25/react-19#ref-as-a-prop` | Missing file + anchor | `/blog/2024/12/05/react-19#ref-as-a-prop` | ✅ Fixed | | `use.md:315` | Server Component | `/reference/react/components#server-components` | Missing anchor | `/reference/rsc/server-components` | ✅ Fixed | | `useEffect.md:899` | if you use a framework, | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `useEffect.md:1051` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `useEffect.md:1736` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `useInsertionEffect.md:136` | non-blocking update, | `/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition` | Wrong anchor | `/reference/react/useTransition#perform-non-blocking-updates-with-actions` | ✅ Fixed | | `createPortal.md:53` | key. | `/learn/rendering-lists/#keeping-list-items-in-order-with-key` | Trailing slash | `/learn/rendering-lists#keeping-list-items-in-order-with-key` | ✅ Fixed | | `react-dom/index.md:24` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed | | `react-dom/index.md:51` | `unmountComponentAtNode` | `/reference/react-dom/unmountComponentAtNode` | Missing file | `https://18.react.dev/reference/react-dom/unmountComponentAtNode` | ✅ Fixed | | `preinit.md:7` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed | | `preinitModule.md:7` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed | | `preload.md:7` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed | | `preloadModule.md:7` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed | | 11 component files | common element props. | `/reference/react-dom/components/common#props` | Wrong anchor | `/reference/react-dom/components/common#common-props` | ✅ Fixed | | `server/index.md:7` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `static/index.md:7` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `introducing-react-dev.md:45` | API Reference | `/reference` | Missing index | `/reference/react` | ✅ Fixed | | `introducing-react-dev.md:610` | Alternatives | `/reference/react-dom/findDOMNode#alternatives` | Missing file | `https://18.react.dev/reference/react-dom/findDOMNode#alternatives` | ✅ Fixed | | `react-labs-march-2023.md:34` | Next.js App Router | `/learn/start-a-new-react-project#nextjs-app-router` | Missing file + anchor | `/learn/creating-a-react-app#nextjs-app-router` | ✅ Fixed | | `react-labs-march-2023.md:95` | Next.js App Router | `/learn/start-a-new-react-project#nextjs-app-router` | Missing file + anchor | `/learn/creating-a-react-app#nextjs-app-router` | ✅ Fixed | | `react-labs-february-2024.md:110` | Sathya Gunasekaran | `/community/team#sathya-gunasekaran` | Contributor link | `https://github.com/gsathya` | ✅ Fixed | | `react-19-upgrade-guide.md:132` | improved how errors are handled | `/blog/2024/04/25/react-19#error-handling` | Missing file + anchor | `/blog/2024/12/05/react-19#error-handling` | ✅ Fixed | | `react-19-upgrade-guide.md:502` | `ref` as a prop | `/blog/2024/04/25/react-19#ref-as-a-prop` | Missing file + anchor | `/blog/2024/12/05/react-19#ref-as-a-prop` | ✅ Fixed | | `react-19.md:358` | Full-stack React Architecture | `/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision` | Missing file + anchor | `/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision` | ✅ Fixed | | `react-19.md:392` | React Server Actions | `/reference/rsc/server-actions` | Missing file | `/reference/rsc/server-functions` | ✅ Fixed | | `view-transitions-activity.md:2498` | view transition classes | `/reference/react/ViewTransition#view-transition-classes` | Missing anchor | `/reference/react/ViewTransition#view-transition-class` | ✅ Fixed | | `rsc/directives.md:13` | bundlers compatible with React Server Components | `/learn/start-a-new-react-project#full-stack-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `rsc/server-components.md:7` | React Server Components | `/learn/start-a-new-react-project#full-stack-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `rsc/use-client.md:44` | compatible bundlers | `/learn/start-a-new-react-project#full-stack-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `react-dom/client/createRoot.md:212` | using a framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `react-dom/client/index.md:7` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed | | `rsc/server-functions.md:198` | `useActionState` | `/reference/react-dom/hooks/useFormState` | Missing file | `/reference/react/useActionState` | ✅ Fixed | | `rsc/server-functions.md:222` | `useActionState` | `/reference/react-dom/hooks/useFormState` | Missing file | `/reference/react/useActionState` | ✅ Fixed | | `rsc/use-server.md:98` | serializable props | `/reference/rsc/use-client#passing-props-from-server-to-client-components` | Missing anchor | `/reference/rsc/use-client#serializable-types` | ✅ Fixed | | `react-dom/components/common.md:919` | check out more examples. | `/reference/react/useRef#examples-dom` | Missing anchor | `/reference/react/useRef#usage` | ✅ Fixed | | `react-dom/components/form.md:233` | reference documentation | `/reference/react/hooks/useOptimistic` | Missing file | `/reference/react/useOptimistic` | ✅ Fixed | ``` $ yarn deadlinks yarn run v1.22.22 $ node scripts/deadLinkChecker.js Checking 177 markdown files... Fetched 552 React error codes ✓ All 1552 links are valid! ✨ Done in 1.07s. ``` * Revert "Fix deadlinks (#7880)" (#7881) Original commit changeset: d52b3ec Revert this so we can just fix the real deadlinks. * Update deadlinks script to take into account redirects (#7882) * Revert "Fix deadlinks (#7880)" Original commit changeset: d52b3ec Revert this so we can just fix the real deadlinks. * Update deadlinks script to take into account redirects Also check if a redirect exists before erroring. * Fix deadlinks take 2 (#7883) Fixes the actual broken links. ``` $ yarn deadlinks yarn run v1.22.22 $ node scripts/deadLinkChecker.js Checking 177 markdown files... Fetched 552 React error codes Loaded 49 redirects from vercel.json ✓ All 1554 links are valid! ✨ Done in 0.86s. ``` * [compiler] Rewrite React Compiler Docs (#7868) * Fix deadlinks take 2 Fixes the actual broken links. ``` $ yarn deadlinks yarn run v1.22.22 $ node scripts/deadLinkChecker.js Checking 177 markdown files... Fetched 552 React error codes Loaded 49 redirects from vercel.json ✓ All 1554 links are valid! ✨ Done in 0.86s. ``` * [compiler] Rewrite React Compiler Docs We've received [feedback](https://bsky.app/profile/danabra.mov/post/3lr46ciujjs2r) that the compiler docs are difficult to understand and not prominent enough that people don't realize the compiler is a serious project and is near stable. This PR rewrites the whole compiler doc section, giving it its own category as well as a standalone reference page. Preview: https://react-dev-git-pr7868-fbopensource.vercel.app/ * [compiler] Fix misleading code example (#7889) When the compiler bails out on code, it leaves it untouched and unoptimized, so it's always safe for the compiler to bailout. `panicThreshold` in most cases should be kept as `'none'` unless you want to fail the build on these safe bailouts. It's really only useful during dev when you're working on increasing the coverage of the compiler on your codebase. I think having it shown here is confusing so I'm opting to just remove it for this particular code example. * [compiler] Flesh out incremental adoption intro more (#7890) Previously the intro was pretty barebones. Fleshed it out a bit more to describe why it might be useful to reach for in a large codebase. * [compiler] Add note about gating evaluation (#7891) * [compiler] Flesh out incremental adoption intro more Previously the intro was pretty barebones. Fleshed it out a bit more to describe why it might be useful to reach for in a large codebase. * [compiler] Add note about gating evaluation Clarify when the gating function is evaluated. * Remove non-existent meetup group (Edinburgh, Scotland) (#7895) The Edinburgh meetup group no longer exists and I have been unable to find any other Scottish React groups * Fixes animation jank on hover (#7904) * fix: box-shadow animation on community (#7905) Co-authored-by: Fre <frederic.vandeborne@icapps.com> * Updates to Activity docs (#7884) * Updates to Activity docs * wip * Updates to Activity docs: - New intro at top of Reference - Adds "Deferring hydration of low-priority content" section - Move "Preventing hidden content from having unwanted side effects" section to Troubleshooting - Removes SSR section from Troubleshooting * useLayoutEffect + Tidying up * Use the same color code step for "visible" * Tidy * Typo * Update section on selective hydration * Update title * Clean up props * Tweak wording * wip * wip * wip * remove temporary scroll restoration while working on docs * wip * wip * Add more information about event and property binding on custom elements (#7939) Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com> * Touch-ups to Activity (#7940) * fix conflict --------- Co-authored-by: Mohammad Reza Badri <85818966+mrbadri@users.noreply.github.com> Co-authored-by: kosh <sipuofare631@gmail.com> Co-authored-by: Gourav Bhardwaj <98509451+gbhardwaj00@users.noreply.github.com> Co-authored-by: Mehmet Mallı <mallimehmet@gmail.com> Co-authored-by: Ricky <rickhanlonii@gmail.com> Co-authored-by: Ryosuke Hoda <h.ryosuke820@gmail.com> Co-authored-by: Nicolas Ettlin <nicolas.ettlin@me.com> Co-authored-by: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com> Co-authored-by: Ajit <47279189+ajits01@users.noreply.github.com> Co-authored-by: bornkiss <101384056+bornkiss@users.noreply.github.com> Co-authored-by: Eric Cote <eric@coteexpert.com> Co-authored-by: Xleine <xleine@qq.com> Co-authored-by: Ayman Alhourani <139303034+aalhoura@users.noreply.github.com> Co-authored-by: Josh Story <story@hey.com> Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp> Co-authored-by: Dmitry Titov <61434098+dimatitov@users.noreply.github.com> Co-authored-by: Shubham Gupta <50445450+shubhamui@users.noreply.github.com> Co-authored-by: G. van Dorland <giodor13@gmail.com> Co-authored-by: Julius Lundang <cHaLkdusT@users.noreply.github.com> Co-authored-by: jinsoo <89149734+Jinsoo1004@users.noreply.github.com> Co-authored-by: John Kapantzakis <kapantzak@gmail.com> Co-authored-by: Mike DiDomizio <mikedidomizio@gmail.com> Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com> Co-authored-by: Jan Kassens <jkassens@meta.com> Co-authored-by: minami yoshihiko <ymym1990ymym@gmail.com> Co-authored-by: Kunall Banerjee <14703164+yeskunall@users.noreply.github.com> Co-authored-by: Amirhossein Alibakhshi <amir78729@gmail.com> Co-authored-by: Jatin Singh <jadenrizz31@gmail.com> Co-authored-by: Batuhan Tomo <91488737+Rekl0w@users.noreply.github.com> Co-authored-by: Noritaka Kobayashi <arukimedesu1166777@gmail.com> Co-authored-by: Dipesh B C <50456672+bcdipesh@users.noreply.github.com> Co-authored-by: Simon Schick <demwizzy@gmail.com> Co-authored-by: lauren <poteto@users.noreply.github.com> Co-authored-by: melanterite <74186236+melanterite@users.noreply.github.com> Co-authored-by: Wes Bos <wesbos@gmail.com> Co-authored-by: Chez Fre <fredvandeborne@hotmail.com> Co-authored-by: Fre <frederic.vandeborne@icapps.com> Co-authored-by: Sam Selikoff <sam.selikoff@gmail.com> Co-authored-by: Corbin Crutchley <crutchcorn@gmail.com> Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com>
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
@@ -24,7 +24,7 @@ title: اضافه کردن ری‌اکت به یک پروژه موجود
 2. **`/some-app` را به‌عنوان *مسیر پایه*** در پیکربندی فریم‌ورک خود مشخص کنید (راهنما: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath)، [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
 3. **سرور یا پروکسی خود را پیکربندی کنید** تا همه درخواست‌های زیر مسیر `/some-app/` توسط اپلیکیشن ری‌اکت شما مدیریت شوند.
 
-این کار تضمین می‌کند که بخش ری‌اکت اپلیکیشن شما می‌تواند از [بهترین شیوه‌های موجود](/learn/build-a-react-app-from-scratch#consider-using-a-framework) که در این فریم‌ورک‌ها تعبیه شده‌اند بهره‌مند شود.  
+این کار تضمین می‌کند که بخش ری‌اکتِ اپلیکیشن شما می‌تواند از [بهترین شیوه‌ها](/learn/build-a-react-app-from-scratch#consider-using-a-framework) تعبیه‌شده در آن فریم‌ورک‌ها بهره‌مند شود.
 
 بسیاری از فریم‌ورک‌های مبتنی بر ری‌اکت فول‌استک هستند و به اپلیکیشن ری‌اکت شما اجازه می‌دهند از قابلیت‌های سرور استفاده کند. با این حال، حتی اگر نتوانید یا نخواهید جاوااسکریپت را روی سرور اجرا کنید، می‌توانید از همان رویکرد استفاده کنید. در این حالت، خروجی HTML/CSS/JS را (خروجی [`next export`](https://nextjs.org/docs/advanced-features/static-html-export) در Next.js یا حالت پیش‌فرض در Gatsby) در مسیر `/some-app/` سرو کنید.  
 
diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
@@ -162,23 +162,137 @@ Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/
 
 ### Custom HTML elements {/*custom-html-elements*/}
 
-If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags:
-
-- All custom element props are serialized to strings and are always set using attributes.
-- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`.
+If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
 
 If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element.
 
-<Note>
+#### Setting values on custom elements {/*attributes-vs-properties*/}
+
+Custom elements have two methods of passing data into them:
+
+1) Attributes: Which are displayed in markup and can only be set to string values
+2) Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values
+
+By default, React will pass values bound in JSX as attributes:
+
+```jsx
+<my-element value="Hello, world!"></my-element>
+```
+
+Non-string JavaScript values passed to custom elements will be serialized by default:
+
+```jsx
+// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
+<my-element value={[1,2,3]}></my-element>
+```
+
+React will, however, recognize an custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction:
+
+<Sandpack>
+
+```js src/index.js hidden
+import {MyElement} from './MyElement.js';
+import { createRoot } from 'react-dom/client';
+import {App} from "./App.js";
+
+customElements.define('my-element', MyElement);
+
+const root = createRoot(document.getElementById('root'))
+root.render(<App />);
+```
+
+```js src/MyElement.js active
+export class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    // The value here will be overwritten by React 
+    // when initialized as an element
+    this.value = undefined;
+  }
+
+  connectedCallback() {
+    this.innerHTML = this.value.join(", ");
+  }
+}
+```
 
-[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
+```js src/App.js
+export function App() {
+  return <my-element value={[1,2,3]}></my-element>
+}
+```
 
-You can try it by upgrading React packages to the most recent experimental version:
+</Sandpack>
+
+#### Listening for events on custom elements {/*custom-element-events*/}
+
+A common pattern when using custom elements is that they may dispatch [`CustomEvent`s](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) rather than accept a function to call when an event occur. You can listen for these events using an `on` prefix when binding to the event via JSX.
+
+<Sandpack>
+
+```js src/index.js hidden
+import {MyElement} from './MyElement.js';
+import { createRoot } from 'react-dom/client';
+import {App} from "./App.js";
+
+customElements.define('my-element', MyElement);
+
+const root = createRoot(document.getElementById('root'))
+root.render(<App />);
+```
+
+```javascript src/MyElement.js
+export class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    this.test = undefined;
+    this.emitEvent = this._emitEvent.bind(this);
+  }
+
+  _emitEvent() {
+    const event = new CustomEvent('speak', {
+      detail: {
+        message: 'Hello, world!',
+      },
+    });
+    this.dispatchEvent(event);
+  }
+
+  connectedCallback() {
+    this.el = document.createElement('button');
+    this.el.innerText = 'Say hi';
+    this.el.addEventListener('click', this.emitEvent);
+    this.appendChild(this.el);
+  }
+
+  disconnectedCallback() {
+    this.el.removeEventListener('click', this.emitEvent);
+  }
+}
+```
+
+```jsx src/App.js active
+export function App() {
+  return (
+    <my-element
+      onspeak={e => console.log(e.detail.message)}
+    ></my-element>
+  )
+}
+```
+
+</Sandpack>
+
+<Note>
 
-- `react@experimental`
-- `react-dom@experimental`
+Events are case-sensitive and support dashes (`-`). Preserve the casing of the event and include all dashes when listening for custom element's events:
 
-Experimental versions of React may contain bugs. Don't use them in production.
+```jsx
+// Listens for `say-hi` events
+<my-element onsay-hi={console.log}></my-element>
+// Listens for `sayHi` events
+<my-element onsayHi={console.log}></my-element>
+```
 
 </Note>
 ---
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
@@ -51,7 +51,7 @@ While hidden, children still re-render in response to new props, albeit at a low
 
 When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and re-create their Effects.
 
-In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring hidden content has no unwanted side effects.
+In this way, Activity can be thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring that your hidden content has no unwanted side effects.
 
 [See more examples below.](#usage)
 
@@ -62,15 +62,15 @@ In this way, Activity can thought of as a mechanism for rendering "background ac
 
 #### Caveats {/*caveats*/}
 
-- When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
+- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation.
 
 ---
 
 ## Usage {/*usage*/}
 
 ### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/}
 
-Typically in React, when you want to conditionally show or hide a component, you mount and unmount it:
+In React, when you want to conditionally show or hide a component, you typically mount or unmount it based on that condition:
 
 ```jsx
 {isShowingSidebar && (
@@ -88,11 +88,12 @@ When you hide a component using an Activity boundary instead, React will "save"
 </Activity>
 ```
 
-This makes it possible to restore components to their previous state.
 
-The following example has a sidebar with an expandable section – you can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
+This makes it possible to hide and then later restore components in the state they were previously in.
 
-Try expanding the Overview section, then toggling the sidebar closed and open:
+The following example has a sidebar with an expandable section. You can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
+
+Try expanding the Overview section, and then toggling the sidebar closed then open:
 
 <Sandpack>
 
