From 9f87530c0eff0bbbf7b35afdaca3842712b0f2cd Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Mon, 31 Mar 2025 12:36:35 -0400 Subject: [PATCH 01/13] Remove captureOwnerStack canary banner (#7701) * Remove captureOwnerStack canary banner * Update nav and site config --- src/content/reference/react/captureOwnerStack.md | 6 ------ src/sidebarReference.json | 8 +++----- src/siteConfig.js | 2 +- 3 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md index f8ed21a8..a5821051 100644 --- a/src/content/reference/react/captureOwnerStack.md +++ b/src/content/reference/react/captureOwnerStack.md @@ -2,12 +2,6 @@ title: captureOwnerStack --- - - -The `captureOwnerStack` API is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). - - - `captureOwnerStack` reads the current Owner Stack in development and returns it as a string if available. diff --git a/src/sidebarReference.json b/src/sidebarReference.json index a044c9f5..851b544d 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -117,6 +117,9 @@ { "title": "cache", "path": "/reference/react/cache" + }, { + "title": "captureOwnerStack", + "path": "/reference/react/captureOwnerStack" }, { "title": "createContext", @@ -147,11 +150,6 @@ "title": "experimental_taintUniqueValue", "path": "/reference/react/experimental_taintUniqueValue", "version": "canary" - }, - { - "title": "captureOwnerStack", - "path": "/reference/react/captureOwnerStack", - "version": "canary" } ] }, diff --git a/src/siteConfig.js b/src/siteConfig.js index 3a8748fa..e731dcec 100644 --- a/src/siteConfig.js +++ b/src/siteConfig.js @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ exports.siteConfig = { - version: '19', + version: '19.1', // -------------------------------------- // Translations should replace these lines: languageCode: 'en', From 38ee8d2a4f121573cf348cd403d76e3d9b264453 Mon Sep 17 00:00:00 2001 From: Ricky Date: Mon, 31 Mar 2025 12:58:06 -0400 Subject: [PATCH 02/13] Add note about StrictMode not as the root component (#7702) --- src/content/reference/react/StrictMode.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index 5b62794b..d620fcc9 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -122,6 +122,12 @@ function App() { In this example, Strict Mode checks will not run against the `Header` and `Footer` components. However, they will run on `Sidebar` and `Content`, as well as all of the components inside them, no matter how deep. + + +When `StrictMode` is enabled for a part of the app, React will only enable behaviors that are possible in production. For example, if `` is not enabled at the root of the app, it will not [re-run Effects an extra time](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) on initial mount, since this would cause child effects to double fire without the parent effects, which cannot happen in production. + + + --- ### Fixing bugs found by double rendering in development {/*fixing-bugs-found-by-double-rendering-in-development*/} From c0e1774ae94a4229f52718070742aa01c8d1d67f Mon Sep 17 00:00:00 2001 From: Ricky Date: Tue, 1 Apr 2025 11:21:03 -0400 Subject: [PATCH 03/13] [errors] special case for 418 (#7705) --- src/components/MDX/ErrorDecoder.tsx | 29 +++++++++++++++++------------ src/pages/errors/[errorCode].tsx | 2 +- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx index b04fa9f7..a9b7455d 100644 --- a/src/components/MDX/ErrorDecoder.tsx +++ b/src/components/MDX/ErrorDecoder.tsx @@ -69,7 +69,7 @@ function parseQueryString(search: string): Array { } export default function ErrorDecoder() { - const {errorMessage} = useErrorDecoderParams(); + const {errorMessage, errorCode} = useErrorDecoderParams(); /** error messages that contain %s require reading location.search */ const hasParams = errorMessage?.includes('%s'); const [message, setMessage] = useState(() => @@ -82,23 +82,28 @@ export default function ErrorDecoder() { if (errorMessage == null || !hasParams) { return; } + const args = parseQueryString(window.location.search); + let message = errorMessage; + if (errorCode === '418') { + // Hydration errors have a %s for the diff, but we don't add that to the args for security reasons. + message = message.replace(/%s$/, ''); - setMessage( - urlify( - replaceArgs( - errorMessage, - parseQueryString(window.location.search), - '[missing argument]' - ) - ) - ); + // Before React 19.1, the error message didn't have an arg, and was always HTML. + if (args.length === 0) { + args.push('HTML'); + } else if (args.length === 1 && args[0] === '') { + args[0] = 'HTML'; + } + } + + setMessage(urlify(replaceArgs(message, args, '[missing argument]'))); setIsReady(true); - }, [hasParams, errorMessage]); + }, [errorCode, hasParams, errorMessage]); return ( {message} diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx index de9eab5b..a67c5742 100644 --- a/src/pages/errors/[errorCode].tsx +++ b/src/pages/errors/[errorCode].tsx @@ -36,7 +36,7 @@ export default function ErrorDecoderPage({ }} routeTree={sidebarLearn as RouteItem} section="unknown"> -
{parsedContent}
+
{parsedContent}
{/*

We highly recommend using the development build locally when debugging From b5f5134b1f0359237894bbb814b6b1d75a730650 Mon Sep 17 00:00:00 2001 From: Ben <119837502+zongben@users.noreply.github.com> Date: Tue, 1 Apr 2025 23:27:35 +0800 Subject: [PATCH 04/13] update reactrouter url (#7703) * update reactrouter url * Update src/content/learn/build-a-react-app-from-scratch.md --------- Co-authored-by: Ricky --- src/content/learn/build-a-react-app-from-scratch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index e5b396c7..10a299fc 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -83,7 +83,7 @@ Routers are a core part of modern applications, and are usually integrated with We suggest using: -- [React Router](https://reactrouter.com/start/framework/custom) +- [React Router](https://reactrouter.com/start/data/custom) - [Tanstack Router](https://tanstack.com/router/latest) From 06500ec44afc0e8f5165b68b62975e1e16c8f99d Mon Sep 17 00:00:00 2001 From: William DRIOT <150556478+SandwichGouda@users.noreply.github.com> Date: Wed, 2 Apr 2025 07:24:43 +0200 Subject: [PATCH 05/13] Typo correction (#7657) --- src/content/learn/build-a-react-app-from-scratch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index 10a299fc..721f670d 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -65,7 +65,7 @@ Rsbuild includes built-in support for React features like fast refresh, JSX, Typ #### Metro for React Native {/*react-native*/} -If you'd you're starting from scratch with React Native you'll need to use [Metro](https://metrobundler.dev/), the JavaScript bundler for React Native. Metro supports bundling for platforms like iOS and Android, but lacks many features when compared to the tools here. We recommend starting with Vite, Parcel, or Rsbuild unless your project requires React Native support. +If you're starting from scratch with React Native you'll need to use [Metro](https://metrobundler.dev/), the JavaScript bundler for React Native. Metro supports bundling for platforms like iOS and Android, but lacks many features when compared to the tools here. We recommend starting with Vite, Parcel, or Rsbuild unless your project requires React Native support. From 6a548a8551b4c98e63942b77f70d0f65cf340629 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Wed, 2 Apr 2025 10:49:35 +0200 Subject: [PATCH 06/13] Use stable React by default in Sandpacks (#7709) --- src/components/MDX/Sandpack/template.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts index 42f02f6a..7fbd537e 100644 --- a/src/components/MDX/Sandpack/template.ts +++ b/src/components/MDX/Sandpack/template.ts @@ -28,8 +28,8 @@ root.render( eject: 'react-scripts eject', }, dependencies: { - react: '19.0.0-rc-3edc000d-20240926', - 'react-dom': '19.0.0-rc-3edc000d-20240926', + react: '^19.1.0', + 'react-dom': '^19.1.0', 'react-scripts': '^5.0.0', }, }, From b77c05d807a49a61035049d47e09c0a97d7f7476 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Wed, 2 Apr 2025 10:52:21 +0200 Subject: [PATCH 07/13] Misc `captureOwnerStack` cleanup after stable release (#7710) 1. Stop using `canary` for `captureOwnerStack` sandboxes 1. Remove remaining Canary badges from `captureOwnerStack` mentions --- src/content/reference/react/Component.md | 5 +- .../reference/react/captureOwnerStack.md | 48 ------------------- 2 files changed, 2 insertions(+), 51 deletions(-) diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 0821d159..8e58af8f 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1273,7 +1273,7 @@ By default, if your application throws an error during rendering, React will rem To implement an error boundary component, you need to provide [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. You can also optionally implement [`componentDidCatch`](#componentdidcatch) to add some extra logic, for example, to log the error to an analytics service. - With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development. +With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development. ```js {9-12,14-27} import * as React from 'react'; @@ -1298,8 +1298,7 @@ class ErrorBoundary extends React.Component { // in div (created by App) // in App info.componentStack, - // Only available in react@canary. - // Warning: Owner Stack is not available in production. + // Warning: `captureOwnerStack` is not available in production. React.captureOwnerStack(), ); } diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md index a5821051..6d8cc502 100644 --- a/src/content/reference/react/captureOwnerStack.md +++ b/src/content/reference/react/captureOwnerStack.md @@ -120,22 +120,6 @@ createRoot(document.createElement('div'), { ); ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ```html public/index.html hidden @@ -351,22 +335,6 @@ const container = document.getElementById("root"); createRoot(container).render(); ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ```js src/App.js function Component() { return ; @@ -411,22 +379,6 @@ export default function App() { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ### `captureOwnerStack` is not available {/*captureownerstack-is-not-available*/} From b5c16dcffade5feb0a56cd2f8ffee59001e46039 Mon Sep 17 00:00:00 2001 From: Mysh! Date: Wed, 2 Apr 2025 17:35:25 +0200 Subject: [PATCH 08/13] fix(reference): declare `subscribe` before passing it to the hook (#7711) --- .../reference/react/useSyncExternalStore.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index 05e0c083..ce989a2a 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -405,14 +405,14 @@ If your store data is mutable, your `getSnapshot` function should return an immu This `subscribe` function is defined *inside* a component so it is different on every re-render: -```js {4-7} +```js {2-5} function ChatIndicator() { - const isOnline = useSyncExternalStore(subscribe, getSnapshot); - // 🚩 Always a different function, so React will resubscribe on every re-render function subscribe() { // ... } + + const isOnline = useSyncExternalStore(subscribe, getSnapshot); // ... } @@ -420,28 +420,28 @@ function ChatIndicator() { React will resubscribe to your store if you pass a different `subscribe` function between re-renders. If this causes performance issues and you'd like to avoid resubscribing, move the `subscribe` function outside: -```js {6-9} -function ChatIndicator() { - const isOnline = useSyncExternalStore(subscribe, getSnapshot); +```js {1-4} +// ✅ Always the same function, so React won't need to resubscribe +function subscribe() { // ... } -// ✅ Always the same function, so React won't need to resubscribe -function subscribe() { +function ChatIndicator() { + const isOnline = useSyncExternalStore(subscribe, getSnapshot); // ... } ``` Alternatively, wrap `subscribe` into [`useCallback`](/reference/react/useCallback) to only resubscribe when some argument changes: -```js {4-8} +```js {2-5} function ChatIndicator({ userId }) { - const isOnline = useSyncExternalStore(subscribe, getSnapshot); - // ✅ Same function as long as userId doesn't change const subscribe = useCallback(() => { // ... }, [userId]); + + const isOnline = useSyncExternalStore(subscribe, getSnapshot); // ... } From 3dfa3bdd23c81ae26bf5596d40d3564a5e1c1c03 Mon Sep 17 00:00:00 2001 From: Ricky Date: Wed, 2 Apr 2025 11:36:56 -0400 Subject: [PATCH 09/13] Fix heading links in StrictMode (#7713) --- src/content/reference/react/StrictMode.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index d620fcc9..1af02ccd 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -88,7 +88,7 @@ Strict Mode enables the following checks in development: - Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering. - Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup. -- Your components will [re-run ref callbacks an extra time](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup. +- Your components will [re-run ref callbacks an extra time](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) to find bugs caused by missing ref cleanup. - Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode) **All of these checks are development-only and do not impact the production build.** @@ -124,7 +124,7 @@ In this example, Strict Mode checks will not run against the `Header` and `Foote -When `StrictMode` is enabled for a part of the app, React will only enable behaviors that are possible in production. For example, if `` is not enabled at the root of the app, it will not [re-run Effects an extra time](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) on initial mount, since this would cause child effects to double fire without the parent effects, which cannot happen in production. +When `StrictMode` is enabled for a part of the app, React will only enable behaviors that are possible in production. For example, if `` is not enabled at the root of the app, it will not [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) on initial mount, since this would cause child effects to double fire without the parent effects, which cannot happen in production. From 9fc122194abd84bc623fbf154b1cfffd68f00985 Mon Sep 17 00:00:00 2001 From: Darshan Parmar <52099415+darshanyeah@users.noreply.github.com> Date: Wed, 2 Apr 2025 21:29:03 +0530 Subject: [PATCH 10/13] Update meetups.md (#7700) Updated `react-ahmedabad` community link to respective domain name --- src/content/community/meetups.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index b3290a00..fefa23e6 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -81,7 +81,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/) ## India {/*india*/} -* [Ahmedabad](https://www.meetup.com/react-ahmedabad/) +* [Ahmedabad](https://reactahmedabad.dev/) * [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/) * [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup) * [Chennai](https://www.linkedin.com/company/chennaireact) From c74271e26a5db2cc7ea696c750101315ad61c531 Mon Sep 17 00:00:00 2001 From: Will Klein Date: Wed, 2 Apr 2025 18:17:42 +0200 Subject: [PATCH 11/13] Add React Denver to the Meetups page (#4727) Co-authored-by: Rick Hanlon --- postcss.config.js | 2 +- public/js/jsfiddle-integration-babel.js | 6 ++++-- public/js/jsfiddle-integration.js | 6 ++++-- scripts/headingIDHelpers/walk.js | 4 ++-- scripts/headingIdLinter.js | 4 ++-- src/content/community/meetups.md | 1 + 6 files changed, 14 insertions(+), 9 deletions(-) diff --git a/postcss.config.js b/postcss.config.js index 42729452..d55c43c9 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -17,4 +17,4 @@ module.exports = { }, }, }, -} +}; diff --git a/public/js/jsfiddle-integration-babel.js b/public/js/jsfiddle-integration-babel.js index 006c79c8..56059472 100644 --- a/public/js/jsfiddle-integration-babel.js +++ b/public/js/jsfiddle-integration-babel.js @@ -4,12 +4,14 @@ // Do not delete or move this file. // Many fiddles reference it so we have to keep it here. -(function() { +(function () { var tag = document.querySelector( 'script[type="application/javascript;version=1.7"]' ); if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) { - alert('Bad JSFiddle configuration, please fork the original React JSFiddle'); + alert( + 'Bad JSFiddle configuration, please fork the original React JSFiddle' + ); } tag.setAttribute('type', 'text/babel'); tag.textContent = tag.textContent.replace(/^\/\/ Checks all files and causes an error if heading ID is missing * yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs * yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file) * yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file) -*/ + */ const markdownPaths = process.argv.slice(2); if (markdownPaths.includes('--fix')) { diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index fefa23e6..18674034 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -169,6 +169,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/) * [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/) * [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/) +* [Denver, CO - React Denver](https://reactdenver.com/) * [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/) * [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy) * [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/) From 0ea503b0fcf66a180dbdc421d0add873a60413c1 Mon Sep 17 00:00:00 2001 From: Philip Durbin Date: Wed, 2 Apr 2025 12:21:50 -0400 Subject: [PATCH 12/13] typo (#7685) --- src/content/learn/tutorial-tic-tac-toe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 1c61d180..c80c7f5f 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -2247,7 +2247,7 @@ body { -As you iterate through `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.) +As you iterate through the `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.) For each move in the tic-tac-toe game's history, you create a list item `

  • ` which contains a button `