From 717f9b5da0e6d148f6aa8896138720bdf5d2f33a Mon Sep 17 00:00:00 2001
From: Kathryn Middleton
Date: Tue, 24 Oct 2023 10:35:15 -0400
Subject: [PATCH 01/39] Remove unsupported ga-lite and update existing calls to
GA4 (#6366)
* Cleanup old ga-lite tag and refactor GA4
* cleanup
* cleanup2
---
.env.production | 2 +-
package.json | 1 -
src/components/Layout/Feedback.tsx | 15 ++++++---------
src/pages/_app.tsx | 17 +++++++++--------
src/pages/_document.tsx | 4 ++--
src/siteConfig.js | 1 -
yarn.lock | 5 -----
7 files changed, 18 insertions(+), 27 deletions(-)
diff --git a/.env.production b/.env.production
index d25eb7dd4..e403f96b6 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
\ No newline at end of file
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
\ No newline at end of file
diff --git a/package.json b/package.json
index 472ef79c9..b5e07d70a 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
- "ga-lite": "^2.1.4",
"github-slugger": "^1.3.0",
"next": "^13.4.1",
"next-remote-watch": "^1.0.0",
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 2bf9afe57..86fc91350 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -4,7 +4,6 @@
import {useState} from 'react';
import {useRouter} from 'next/router';
-import {ga} from '../../utils/analytics';
export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
const {asPath} = useRouter();
@@ -48,14 +47,12 @@ const thumbsDownIcon = (
function sendGAEvent(isPositive: boolean) {
// Fragile. Don't change unless you've tested the network payload
// and verified that the right events actually show up in GA.
- ga(
- 'send',
- 'event',
- 'button',
- 'feedback',
- window.location.pathname,
- isPositive ? '1' : '0'
- );
+ // @ts-ignore
+ gtag('event', 'feedback', {
+ event_category: 'button',
+ event_label: window.location.pathname,
+ value: isPositive ? 1 : 0,
+ });
}
function SendFeedback({onSubmit}: {onSubmit: () => void}) {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 717375968..5431f87cc 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,6 @@
import {useEffect} from 'react';
import {AppProps} from 'next/app';
import {useRouter} from 'next/router';
-import {ga} from '../utils/analytics';
import '@docsearch/css';
import '../styles/algolia.css';
@@ -13,13 +12,13 @@ import '../styles/index.css';
import '../styles/sandpack.css';
if (typeof window !== 'undefined') {
- if (process.env.NODE_ENV === 'production') {
- ga('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto');
- ga('send', 'pageview');
- }
const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
window.addEventListener(terminationEvent, function () {
- ga('send', 'timing', 'JS Dependencies', 'unload');
+ // @ts-ignore
+ gtag('event', 'timing', {
+ event_label: 'JS Dependencies',
+ event: 'unload',
+ });
});
}
@@ -44,8 +43,10 @@ export default function MyApp({Component, pageProps}: AppProps) {
useEffect(() => {
const handleRouteChange = (url: string) => {
const cleanedUrl = url.split(/[\?\#]/)[0];
- ga('set', 'page', cleanedUrl);
- ga('send', 'pageview');
+ // @ts-ignore
+ gtag('event', 'pageview', {
+ event_label: cleanedUrl,
+ });
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index d8fb0c621..823ca0b71 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -11,11 +11,11 @@ const MyDocument = () => {
diff --git a/src/siteConfig.js b/src/siteConfig.js
index c676ca6e2..0ada6b934 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -17,5 +17,4 @@ exports.siteConfig = {
apiKey: 'e8451218980a351815563de007648b00',
indexName: 'beta-react',
},
- googleAnalyticsTagId: 'G-B1E83PJ3RT',
};
diff --git a/yarn.lock b/yarn.lock
index 8a3183cd5..c7b0f980e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2765,11 +2765,6 @@ functional-red-black-tree@^1.0.1:
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
-ga-lite@^2.1.4:
- version "2.1.4"
- resolved "https://registry.yarnpkg.com/ga-lite/-/ga-lite-2.1.4.tgz#f0c1fd3234bc44d8b15db640a93b34dbce84d43a"
- integrity sha512-OJqPbutD8SfgF8SebyLh0uHdpQH32d5TuviXao5yPjyO2sGW3Gm+ooDmOhvXITgPepwwKxzv7ZMVKk2/hg/+lg==
-
gensync@^1.0.0-beta.2:
version "1.0.0-beta.2"
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
From bbdbaca1ef8b2e84bb660250703cb56400d3b83a Mon Sep 17 00:00:00 2001
From: Soichiro Miki
Date: Wed, 25 Oct 2023 04:06:25 +0900
Subject: [PATCH 02/39] Fixes related to "Your UI as a Tree" (#6374)
---
src/content/learn/describing-the-ui.md | 12 ++++++++++--
src/content/learn/understanding-your-ui-as-a-tree.md | 2 +-
2 files changed, 11 insertions(+), 3 deletions(-)
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index e8b6440aa..167fe5b70 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -530,13 +530,21 @@ React uses trees to model the relationships between components and modules.
A React render tree is a representation of the parent and child relationship between components.
-An example React render tree.
+
+
+An example React render tree.
+
+
Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
-An example module dependency tree.
+
+
+An example module dependency tree.
+
+
A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues.
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index 2a5a24b85..98f60cea8 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -253,7 +253,7 @@ With conditional rendering, across different renders, the render tree may render
In this example, depending on what `inspiration.type` is, we may render `` or ``. The render tree may be different for each render pass.
-Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
+Although render trees may differ across render passes, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
Identifying these categories of components are useful for understanding data flow and performance of your app.
From 63f947024966a71370b3b9ba131fb78f8ced7c59 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton
Date: Tue, 24 Oct 2023 14:26:01 -0700
Subject: [PATCH 03/39] Add Error Boundary to useTransition API docs (#6354)
* Add Error Boundary to useTransition docs
* add Error Boundary to useTransition
* Use Canary
* Add Error Boundary to useTransition API docs
* Update src/components/MDX/Sandpack/Preview.tsx
Co-authored-by: Jan Kassens
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
* Add Error Boundary to useTransition docs
* add Error Boundary to useTransition
* Use Canary
* Add Error Boundary to useTransition API docs
* Update src/components/MDX/Sandpack/Preview.tsx
Co-authored-by: Jan Kassens
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
* Address comments and update usage example
* Address comments and update usage example
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
---------
Co-authored-by: Jan Kassens
Co-authored-by: Luna
---
src/components/MDX/Sandpack/Preview.tsx | 6 +
src/content/reference/react/useTransition.md | 111 +++++++++++++++++--
src/sidebarReference.json | 3 +-
3 files changed, 111 insertions(+), 9 deletions(-)
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 8d83d9867..059645550 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -52,6 +52,12 @@ export function Preview({
rawError = null;
}
+ // When throwing a new Error in Sandpack - we want to disable the dev error dialog
+ // to show the Error Boundary fallback
+ if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
+ rawError = null;
+ }
+
// Memoized because it's fed to debouncing.
const firstLintError = useMemo(() => {
if (lintErrors.length === 0) {
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index a6fcde710..1d808aac2 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -1,5 +1,6 @@
---
title: useTransition
+canary: true
---
@@ -151,7 +152,7 @@ export default function TabContainer() {
function selectTab(nextTab) {
startTransition(() => {
- setTab(nextTab);
+ setTab(nextTab);
});
}
@@ -823,7 +824,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1017,7 +1018,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1288,7 +1289,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1332,7 +1333,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1379,9 +1380,9 @@ async function getBio() {
setTimeout(resolve, 500);
});
- return `The Beatles were an English rock band,
- formed in Liverpool in 1960, that comprised
- John Lennon, Paul McCartney, George Harrison
+ return `The Beatles were an English rock band,
+ formed in Liverpool in 1960, that comprised
+ John Lennon, Paul McCartney, George Harrison
and Ringo Starr.`;
}
@@ -1501,6 +1502,100 @@ main {
---
+### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+
+
+
+Error Boundary for useTransition 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).
+
+
+
+If a function passed to `startTransition` throws an error, you can display an error to your user with an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `useTransition` in an error boundary. Once the function passed to `startTransition` errors, the fallback for the error boundary will be displayed.
+
+
+
+```js AddCommentContainer.js active
+import { useTransition } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export function AddCommentContainer() {
+ return (
+ ⚠️Something went wrong}>
+
+
+ );
+}
+
+function addComment(comment) {
+ // For demonstration purposes to show Error Boundary
+ if(comment == null){
+ throw Error('Example error')
+ }
+}
+
+function AddCommentButton() {
+ const [pending, startTransition] = useTransition();
+
+ return (
+
+ );
+}
+```
+
+```js App.js hidden
+import { AddCommentContainer } from "./AddCommentContainer.js";
+
+export default function App() {
+ return ;
+}
+```
+
+```js index.js hidden
+// TODO: update to import from stable
+// react instead of canary once the `use`
+// Hook is in a stable release of React
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+// TODO: update this example to use
+// the Codesandbox Server Component
+// demo environment once it is created
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "canary",
+ "react-dom": "canary",
+ "react-scripts": "^5.0.0",
+ "react-error-boundary": "4.0.3"
+ },
+ "main": "/index.js"
+}
+```
+
+
+---
+
## Troubleshooting {/*troubleshooting*/}
### Updating an input in a transition doesn't work {/*updating-an-input-in-a-transition-doesnt-work*/}
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 3c8daf71a..acc93328a 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -73,7 +73,8 @@
},
{
"title": "useTransition",
- "path": "/reference/react/useTransition"
+ "path": "/reference/react/useTransition",
+ "canary": true
}
]
},
From 2779615e647f3a99d95b6daf072426e222d5fdd3 Mon Sep 17 00:00:00 2001
From: Sophie Alpert
Date: Tue, 24 Oct 2023 15:00:26 -0700
Subject: [PATCH 04/39] Warn about low entropy in taintUniqueValue.md (#6379)
* Warn about low entropy in taintUniqueValue.md
* Update src/content/reference/react/experimental_taintUniqueValue.md
Co-authored-by: Jan Kassens
---------
Co-authored-by: Jan Kassens
---
src/content/reference/react/experimental_taintUniqueValue.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index a67eebf77..e26c29bfe 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -67,7 +67,8 @@ experimental_taintUniqueValue(
#### Caveats {/*caveats*/}
-- Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values.
+* Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values.
+* Do not use `taintUniqueValue` to protect low-entropy values such as PIN codes or phone numbers. If any value in a request is controlled by an attacker, they could infer which value is tainted by enumerating all possible values of the secret.
---
From 5e40d13bcde36ab730b48e0a8cca29b18ec95242 Mon Sep 17 00:00:00 2001
From: David McCabe
Date: Wed, 25 Oct 2023 10:40:39 -0700
Subject: [PATCH 05/39] Add useFormState reference (#6338)
Add useFormState reference
---
.../reference/react-dom/hooks/useFormState.md | 291 ++++++++++++++++++
src/sidebarReference.json | 5 +
2 files changed, 296 insertions(+)
create mode 100644 src/content/reference/react-dom/hooks/useFormState.md
diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
new file mode 100644
index 000000000..ca7af2536
--- /dev/null
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -0,0 +1,291 @@
+---
+title: useFormState
+canary: true
+---
+
+
+
+The `useFormState` Hook 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). In addition, you need to use a framework that supports React Server Components to get the full benefit of `useFormState`.
+
+
+
+
+
+`useFormState` is a Hook that allows you to read the return value of the form action after a form is submitted.
+
+```js
+const [state, formAction] = useFormState(action, initalState);
+```
+
+
+
+
+
+---
+
+## Reference {/*reference*/}
+
+### `useFormState()` {/*useformstate*/}
+
+In the context of React Server Components, an *action* is a function that may be [executed when a form is submitted](/reference/react-dom/components/form). You can execute actions on the server or on the client.
+
+{/* TODO T164397693: link to actions documentation once it exists */}
+
+Call `useFormState` at the top level of your component to see the return value of an action after submitting a form. You pass `useFormState` an existing action as well as an initial state, and it returns a new action that you use when submitting your form, along with the latest form state.
+
+```js
+function AddToCart({itemID}) {
+ const [message, formAction] = useFormState(addToCartAction, null);
+ return (
+
+ )
+}
+```
+
+The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.
+
+If used with a server action, `useFormState` allows the server's response from submitting the form to be shown even before hydration has completed.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `action`: The action to be performed when the form is submitted. When the action is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that an action normally receives.
+* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the form is first submitted.
+
+{/* TODO T164397693: link to serializable values docs once it exists */}
+
+
+#### Returns {/*returns*/}
+
+`useFormState` returns an array with exactly two values:
+
+1. The current state. During the first render, it will match the `initialState` you have passed. After the form is submitted, it will match the value returned by the action.
+2. A new action that you can pass as the `action` prop to your `form` component.
+
+#### Caveats {/*caveats*/}
+
+* When used with a framework that supports React Server Components, `useFormState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, there is no advantage to using it over component local state.
+* The action passed to `useFormState` receives an extra argument, the previous or initial state state, as its first argument. This makes its signature different than if it were used directly without `useFormState`.
+
+---
+
+## Usage {/*usage*/}
+
+### Using information returned by a form action {/*using-information-returned-by-a-form-action*/}
+
+Call `useFormState` at the top level of your component to access the return value of an action from the last time a form was submitted.
+
+```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
+import { useFormState } from 'react-dom';
+import { action } from './actions.js';
+
+function MyComponent() {
+ const [state, formAction] = useFormState(action, null);
+ // ...
+ return (
+
+ );
+}
+```
+
+`useFormState` returns an array with exactly two items:
+
+1. The current state of the form, which is initially set to the initial state you provided, and after the form is submitted is set to the return value of the action you provided.
+2. A new action that you pass to `