From 7fa3d317d3e38927da379809111d04397f9d9ada Mon Sep 17 00:00:00 2001 From: React Translation Bot <89879766+react-translations-bot@users.noreply.github.com> Date: Sat, 9 Aug 2025 21:54:14 +0100 Subject: [PATCH] Sync with react.dev @ e07ac94b (#481) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * 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 * 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 * 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 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 * 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 * 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: d52b3ec73407 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: d52b3ec73407 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 --------- Co-authored-by: Mohammad Reza Badri <85818966+mrbadri@users.noreply.github.com> Co-authored-by: kosh Co-authored-by: Gourav Bhardwaj <98509451+gbhardwaj00@users.noreply.github.com> Co-authored-by: Mehmet Mallı Co-authored-by: Ricky Co-authored-by: Ryosuke Hoda Co-authored-by: Nicolas Ettlin 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 Co-authored-by: Xleine Co-authored-by: Ayman Alhourani <139303034+aalhoura@users.noreply.github.com> Co-authored-by: Josh Story Co-authored-by: Soichiro Miki 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 Co-authored-by: Julius Lundang Co-authored-by: jinsoo <89149734+Jinsoo1004@users.noreply.github.com> Co-authored-by: John Kapantzakis Co-authored-by: Mike DiDomizio Co-authored-by: Aakansha Doshi Co-authored-by: Jan Kassens Co-authored-by: minami yoshihiko Co-authored-by: Kunall Banerjee <14703164+yeskunall@users.noreply.github.com> Co-authored-by: Amirhossein Alibakhshi Co-authored-by: Jatin Singh Co-authored-by: Batuhan Tomo <91488737+Rekl0w@users.noreply.github.com> Co-authored-by: Noritaka Kobayashi Co-authored-by: Dipesh B C <50456672+bcdipesh@users.noreply.github.com> Co-authored-by: Simon Schick Co-authored-by: lauren Co-authored-by: melanterite <74186236+melanterite@users.noreply.github.com> --- scripts/deadLinkChecker.js | 28 +++++++++++++++++++ .../learn/add-react-to-an-existing-project.md | 4 +++ .../learn/synchronizing-with-effects.md | 4 +++ src/content/learn/typescript.md | 4 +++ .../learn/you-might-not-need-an-effect.md | 8 ++++++ .../reference/react-dom/client/createRoot.md | 4 +++ .../reference/react-dom/client/index.md | 4 +++ .../reference/react-dom/server/index.md | 4 +++ .../reference/react-dom/static/index.md | 4 +++ .../reference/react-dom/static/prerender.md | 4 +++ .../react-dom/static/prerenderToNodeStream.md | 4 +++ src/content/reference/react/forwardRef.md | 4 +++ src/content/reference/react/useEffect.md | 12 ++++++++ src/content/reference/rsc/directives.md | 4 +++ .../reference/rsc/server-components.md | 4 +++ src/content/reference/rsc/server-functions.md | 4 +++ src/content/reference/rsc/use-client.md | 4 +++ 17 files changed, 104 insertions(+) diff --git a/scripts/deadLinkChecker.js b/scripts/deadLinkChecker.js index e659772e6..349231b1d 100644 --- a/scripts/deadLinkChecker.js +++ b/scripts/deadLinkChecker.js @@ -11,6 +11,10 @@ const fileCache = new Map(); const anchorMap = new Map(); // Map> const contributorMap = new Map(); // Map <<<<<<< HEAD +<<<<<<< HEAD +======= +const redirectMap = new Map(); // Map +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 ======= const redirectMap = new Map(); // Map >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 @@ -167,7 +171,10 @@ async function validateLink(link) { } <<<<<<< HEAD +<<<<<<< HEAD +======= ======= +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 // Check for redirects if (redirectMap.has(urlWithoutAnchor)) { const redirectDestination = redirectMap.get(urlWithoutAnchor); @@ -184,6 +191,9 @@ async function validateLink(link) { return validateLink(redirectedLink); } +<<<<<<< HEAD +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 // Check if it's an error code link const errorCodeMatch = urlWithoutAnchor.match(/^\/errors\/(\d+)$/); @@ -318,8 +328,12 @@ async function fetchErrorCodes() { } const codes = await response.json(); errorCodes = new Set(Object.keys(codes)); +<<<<<<< HEAD <<<<<<< HEAD console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes\n`)); +======= + console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`)); +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 ======= console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`)); >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 @@ -329,7 +343,10 @@ async function fetchErrorCodes() { } <<<<<<< HEAD +<<<<<<< HEAD +======= ======= +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 async function buildRedirectsMap() { try { const vercelConfigPath = path.join(__dirname, '../vercel.json'); @@ -354,6 +371,9 @@ async function buildRedirectsMap() { } } +<<<<<<< HEAD +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 async function main() { const files = getMarkdownFiles(); @@ -361,6 +381,10 @@ async function main() { await fetchErrorCodes(); <<<<<<< HEAD +<<<<<<< HEAD +======= + await buildRedirectsMap(); +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 ======= await buildRedirectsMap(); >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 @@ -374,6 +398,10 @@ async function main() { if (deadLinks.length > 0) { <<<<<<< HEAD +<<<<<<< HEAD +======= + console.log('\n'); +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 ======= console.log('\n'); >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index b0638e413..f3fc43d2c 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -24,11 +24,15 @@ Here's how we recommend to set it up: 2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [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. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app. +<<<<<<< HEAD <<<<<<< HEAD This ensures the React part of your app can [benefit from the best practices](/learn/creating-a-react-app#full-stack-frameworks) baked into those frameworks. ======= This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead. diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 6ba18f443..633fd04f9 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -732,11 +732,15 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches: +<<<<<<< HEAD <<<<<<< HEAD - **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. ======= - **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 - **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). You can continue fetching data directly in Effects if neither of these approaches suit you. diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 3ce753069..58bca60e9 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -20,11 +20,15 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out ## Installation {/*installation*/} +<<<<<<< HEAD <<<<<<< HEAD All [production-grade React frameworks](/learn/creating-a-react-app#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: ======= All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 - [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript) - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript) diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index aa3eb131a..a683be1f4 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -26,11 +26,15 @@ There are two common cases in which you don't need Effects: * **You don't need Effects to transform data for rendering.** For example, let's say you want to filter a list before displaying it. You might feel tempted to write an Effect that updates a state variable when the list changes. However, this is inefficient. When you update the state, React will first call your component functions to calculate what should be on the screen. Then React will ["commit"](/learn/render-and-commit) these changes to the DOM, updating the screen. Then React will run your Effects. If your Effect *also* immediately updates the state, this restarts the whole process from scratch! To avoid the unnecessary render passes, transform all the data at the top level of your components. That code will automatically re-run whenever your props or state change. * **You don't need Effects to handle user events.** For example, let's say you want to send an `/api/buy` POST request and show a notification when the user buys a product. In the Buy button click event handler, you know exactly what happened. By the time an Effect runs, you don't know *what* the user did (for example, which button was clicked). This is why you'll usually handle user events in the corresponding event handlers. +<<<<<<< HEAD <<<<<<< HEAD You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components. ======= You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 To help you gain the right intuition, let's look at some common concrete examples! @@ -761,11 +765,15 @@ This ensures that when your Effect fetches data, all responses except the last r Handling race conditions is not the only difficulty with implementing data fetching. You might also want to think about caching responses (so that the user can click Back and see the previous screen instantly), how to fetch data on the server (so that the initial server-rendered HTML contains the fetched content instead of a spinner), and how to avoid network waterfalls (so that a child can fetch data without waiting for every parent). +<<<<<<< HEAD <<<<<<< HEAD **These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.** ======= **These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.** >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.** +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 If you don't use a framework (and don't want to build your own) but would like to make data fetching from Effects more ergonomic, consider extracting your fetching logic into a custom Hook like in this example: diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index da1bfe99e..7097f65e7 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -209,11 +209,15 @@ When your HTML is empty, the user sees a blank page until the app's JavaScript c
``` +<<<<<<< HEAD <<<<<<< HEAD This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/creating-a-react-app#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).* ======= This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).* >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).* +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md index 8f47b2f4b..d76d33d5f 100644 --- a/src/content/reference/react-dom/client/index.md +++ b/src/content/reference/react-dom/client/index.md @@ -4,11 +4,15 @@ title: Client React DOM APIs +<<<<<<< HEAD <<<<<<< HEAD The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. ======= The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md index e25bd9f42..a465d551f 100644 --- a/src/content/reference/react-dom/server/index.md +++ b/src/content/reference/react-dom/server/index.md @@ -4,11 +4,15 @@ title: Server React DOM APIs +<<<<<<< HEAD <<<<<<< HEAD The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. ======= The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md index 739b7bf1d..011adc083 100644 --- a/src/content/reference/react-dom/static/index.md +++ b/src/content/reference/react-dom/static/index.md @@ -4,11 +4,15 @@ title: Static React DOM APIs +<<<<<<< HEAD <<<<<<< HEAD The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. ======= The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index ea576d227..a47caffc8 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -75,6 +75,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD +<<<<<<< HEAD `nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself. ======= `nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. @@ -97,6 +98,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to ======= `nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index 87e75c325..126e29a3b 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -76,6 +76,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD +<<<<<<< HEAD `nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself. ======= `nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. @@ -98,6 +99,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to ======= `nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 24e19d9ef..d8068708d 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -6,6 +6,7 @@ title: forwardRef In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead. +<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD `forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). @@ -15,6 +16,9 @@ In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead. ======= `forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +`forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index 6f9b8b0bf..873475f37 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -896,11 +896,15 @@ In this example, a cleanup function is not needed because the `MapWidget` class ### Fetching data with Effects {/*fetching-data-with-effects*/} +<<<<<<< HEAD <<<<<<< HEAD You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/creating-a-react-app#full-stack-frameworks) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually. ======= You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/start-a-new-react-project#full-stack-frameworks) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/start-a-new-react-project#full-stack-frameworks) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 If you want to fetch data from an Effect manually, your code might look like this: @@ -1052,11 +1056,15 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches: +<<<<<<< HEAD <<<<<<< HEAD - **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. ======= - **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 - **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). You can continue fetching data directly in Effects if neither of these approaches suit you. @@ -1741,11 +1749,15 @@ function Page({ url, shoppingCart }) { ### Displaying different content on the server and the client {/*displaying-different-content-on-the-server-and-the-client*/} +<<<<<<< HEAD <<<<<<< HEAD If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/creating-a-react-app#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server. ======= If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/start-a-new-react-project#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/start-a-new-react-project#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 In rare cases, you might need to display different content on the client. For example, if your app reads some data from [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), it can't possibly do that on the server. Here is how you could implement this: diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md index 1a905597e..be75f7506 100644 --- a/src/content/reference/rsc/directives.md +++ b/src/content/reference/rsc/directives.md @@ -10,6 +10,7 @@ Directives are for use in [React Server Components](/reference/rsc/server-compon +<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). @@ -19,6 +20,9 @@ Directives provide instructions to [bundlers compatible with React Server Compon ======= Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md index 1ce6e865a..2ff7ac8d4 100644 --- a/src/content/reference/rsc/server-components.md +++ b/src/content/reference/rsc/server-components.md @@ -4,6 +4,7 @@ title: Server Components +<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD Server Components are for use in [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). @@ -13,6 +14,9 @@ Server Components are for use in [React Server Components](/learn/creating-a-rea ======= Server Components are for use in [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +Server Components are for use in [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index 56c7daf40..b5b4ba3b5 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -35,6 +35,7 @@ To support Server Functions as a bundler or framework, we recommend pinning to a <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD +<<<<<<< HEAD When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. ======= When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the Server Function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. @@ -57,6 +58,9 @@ When a Server Function is defined with the [`"use server"`](/reference/rsc/use-s ======= When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the Server Function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the Server Function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components. diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md index c783fa571..2e02f91c2 100644 --- a/src/content/reference/rsc/use-client.md +++ b/src/content/reference/rsc/use-client.md @@ -41,6 +41,7 @@ export default function RichTextEditor({ timestamp, text }) { } ``` +<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code. @@ -50,6 +51,9 @@ When a file marked with `'use client'` is imported from a Server Component, [com ======= When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code. >>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 +======= +When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code. +>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9 As dependencies of `RichTextEditor`, `formatDate` and `Button` will also be evaluated on the client regardless of whether their modules contain a `'use client'` directive. Note that a single module may be evaluated on the server when imported from server code and on the client when imported from client code.