From 982b16d60e637a41b9c2e7c347869c1260b9ee90 Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 21 Mar 2025 16:32:38 -0400 Subject: [PATCH 01/19] [ci] Fix permissions and don't use pull_request_target (#7689) Defaults permissions to none for all workflows, and only request extra permissions when needed. Similar to https://github.com/facebook/react/pull/32708, prefer the less permissive `pull_request` trigger instead. --- .github/workflows/analyze.yml | 4 +++- .github/workflows/analyze_comment.yml | 4 +++- .github/workflows/discord_notify.yml | 7 ++++++- .github/workflows/label_core_team_prs.yml | 12 +++++++++++- .github/workflows/site_lint.yml | 4 +++- 5 files changed, 26 insertions(+), 5 deletions(-) diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index b1ef428d0..13c9c844a 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -7,6 +7,8 @@ on: - main # change this if your default branch is named differently workflow_dispatch: +permissions: {} + jobs: analyze: runs-on: ubuntu-latest @@ -23,7 +25,7 @@ jobs: - name: Restore cached node_modules uses: actions/cache@v4 with: - path: "**/node_modules" + path: '**/node_modules' key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }} - name: Install deps diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 5a3047cfc..7e5a24d04 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -2,10 +2,12 @@ name: Analyze Bundle (Comment) on: workflow_run: - workflows: ["Analyze Bundle"] + workflows: ['Analyze Bundle'] types: - completed +permissions: {} + jobs: comment: runs-on: ubuntu-latest diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml index a4b8c9137..a553b23a0 100644 --- a/.github/workflows/discord_notify.yml +++ b/.github/workflows/discord_notify.yml @@ -1,12 +1,17 @@ name: Discord Notify on: - pull_request_target: + pull_request: types: [opened, ready_for_review] +permissions: {} + jobs: check_maintainer: uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + permissions: + # Used by check_maintainer + contents: read with: actor: ${{ github.event.pull_request.user.login }} is_remote: true diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml index 3d9fa2be1..6099b8fcb 100644 --- a/.github/workflows/label_core_team_prs.yml +++ b/.github/workflows/label_core_team_prs.yml @@ -1,7 +1,9 @@ name: Label Core Team PRs on: - pull_request_target: + pull_request: + +permissions: {} env: TZ: /usr/share/zoneinfo/America/Los_Angeles @@ -11,6 +13,9 @@ env: jobs: check_maintainer: uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + permissions: + # Used by check_maintainer + contents: read with: actor: ${{ github.event.pull_request.user.login }} is_remote: true @@ -19,6 +24,11 @@ jobs: if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} runs-on: ubuntu-latest needs: check_maintainer + permissions: + # Used to add labels on issues + issues: write + # Used to add labels on PRs + pull-requests: write steps: - name: Label PR as React Core Team uses: actions/github-script@v7 diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml index 36f7642c9..81a04601c 100644 --- a/.github/workflows/site_lint.yml +++ b/.github/workflows/site_lint.yml @@ -7,6 +7,8 @@ on: pull_request: types: [opened, synchronize, reopened] +permissions: {} + jobs: lint: runs-on: ubuntu-latest @@ -25,7 +27,7 @@ jobs: - name: Restore cached node_modules uses: actions/cache@v4 with: - path: "**/node_modules" + path: '**/node_modules' key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }} - name: Install deps From f6d762cbbf958ca45bb8d1d011b31e5289e43a3d Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 21 Mar 2025 16:32:50 -0400 Subject: [PATCH 02/19] [ci] Pin 3rd party actions to specific hash (#7690) * [ci] Fix permissions and don't use pull_request_target Defaults permissions to none for all workflows, and only request extra permissions when needed. Similar to https://github.com/facebook/react/pull/32708, prefer the less permissive `pull_request` trigger instead. * [ci] Pin 3rd party actions to specific hash --- .github/workflows/analyze.yml | 2 +- .github/workflows/analyze_comment.yml | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index 13c9c844a..83e7f2e8a 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -57,7 +57,7 @@ jobs: name: bundle_analysis.json - name: Download base branch bundle stats - uses: dawidd6/action-download-artifact@v2 + uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e if: success() && github.event.number with: workflow: analyze.yml diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 7e5a24d04..1e086b9b7 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -16,7 +16,7 @@ jobs: github.event.workflow_run.conclusion == 'success' }} steps: - name: Download base branch bundle stats - uses: dawidd6/action-download-artifact@v2 + uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e with: workflow: analyze.yml run_id: ${{ github.event.workflow_run.id }} @@ -24,7 +24,7 @@ jobs: path: analysis_comment.txt - name: Download PR number - uses: dawidd6/action-download-artifact@v2 + uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e with: workflow: analyze.yml run_id: ${{ github.event.workflow_run.id }} @@ -50,7 +50,7 @@ jobs: echo "pr-number=$pr_number" >> $GITHUB_OUTPUT - name: Comment - uses: marocchino/sticky-pull-request-comment@v2 + uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728 with: header: next-bundle-analysis number: ${{ steps.get-comment-body.outputs.pr-number }} From 0bc63000f74b3889b141dd4f4f8c1b817cd70d5a Mon Sep 17 00:00:00 2001 From: Ricky Date: Mon, 24 Mar 2025 15:46:53 -0400 Subject: [PATCH 03/19] [ci] fix notify for forks (#7694) --- .github/workflows/discord_notify.yml | 2 +- .github/workflows/label_core_team_prs.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml index a553b23a0..8314deb3a 100644 --- a/.github/workflows/discord_notify.yml +++ b/.github/workflows/discord_notify.yml @@ -1,7 +1,7 @@ name: Discord Notify on: - pull_request: + pull_request_target: types: [opened, ready_for_review] permissions: {} diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml index 6099b8fcb..529d7cc48 100644 --- a/.github/workflows/label_core_team_prs.yml +++ b/.github/workflows/label_core_team_prs.yml @@ -1,7 +1,7 @@ name: Label Core Team PRs on: - pull_request: + pull_request_target: permissions: {} From 9b2ad174d0971230f2ba02d1a2c4580469c7fa86 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 24 Mar 2025 16:40:33 -0400 Subject: [PATCH 04/19] [ci] Remove unused param (#7695) https://github.com/facebook/react/pull/32727 removes the `is_remote` param. --- .github/workflows/discord_notify.yml | 1 - .github/workflows/label_core_team_prs.yml | 1 - 2 files changed, 2 deletions(-) diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml index 8314deb3a..2f5b2a497 100644 --- a/.github/workflows/discord_notify.yml +++ b/.github/workflows/discord_notify.yml @@ -14,7 +14,6 @@ jobs: contents: read with: actor: ${{ github.event.pull_request.user.login }} - is_remote: true notify: if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml index 529d7cc48..f9b3328ee 100644 --- a/.github/workflows/label_core_team_prs.yml +++ b/.github/workflows/label_core_team_prs.yml @@ -18,7 +18,6 @@ jobs: contents: read with: actor: ${{ github.event.pull_request.user.login }} - is_remote: true label: if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} From 6788f6bade9bd11c3c7f0cdad620501e2063c4e5 Mon Sep 17 00:00:00 2001 From: Alberto Velandia Date: Mon, 24 Mar 2025 15:47:47 -0700 Subject: [PATCH 05/19] Fixes typo (#7688) --- src/content/reference/react-dom/hooks/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md index 73eefae75..5dfb07d82 100644 --- a/src/content/reference/react-dom/hooks/index.md +++ b/src/content/reference/react-dom/hooks/index.md @@ -14,7 +14,7 @@ The `react-dom` package contains Hooks that are only supported for web applicati *Forms* let you create interactive controls for submitting information. To manage forms in your components, use one of these Hooks: -* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of the a form. +* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of a form. ```js function Form({ action }) { From 2859efa07357dfc2927517ce9765515acf903c7c Mon Sep 17 00:00:00 2001 From: Petr Chalupa Date: Tue, 25 Mar 2025 22:28:39 +0100 Subject: [PATCH 06/19] Add React Prague community (#7279) * Add React Prague community * Update link --- src/content/community/meetups.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index 906c170de..b3290a004 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -47,6 +47,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Colombia {/*colombia*/} * [Medellin](https://www.meetup.com/React-Medellin/) +## Czechia {/*czechia*/} +* [Prague](https://guild.host/react-prague/) + ## Denmark {/*denmark*/} * [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/) * [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/) From 9f87530c0eff0bbbf7b35afdaca3842712b0f2cd Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Mon, 31 Mar 2025 12:36:35 -0400 Subject: [PATCH 07/19] 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 f8ed21a8c..a5821051c 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 a044c9f5b..851b544d0 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 3a8748fa6..e731dcec4 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 08/19] 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 5b62794bc..d620fcc98 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 09/19] [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 b04fa9f79..a9b7455df 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 de9eab5bb..a67c5742d 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 10/19] 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 e5b396c7e..10a299fcf 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 11/19] 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 10a299fcf..721f670dd 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 12/19] 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 42f02f6a6..7fbd537e7 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 13/19] 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 0821d1593..8e58af8ff 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 a5821051c..6d8cc502d 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 14/19] 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 05e0c0831..ce989a2a4 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 15/19] 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 d620fcc98..1af02ccd1 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 16/19] 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 b3290a004..fefa23e6a 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 17/19] 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 427294522..d55c43c90 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 006c79c8a..56059472f 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 fefa23e6a..186740341 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 18/19] 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 1c61d180a..c80c7f5fe 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 `