diff --git a/src/content/reference/react/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md
index ce91c3d0ce..e3fd35a485 100644
--- a/src/content/reference/react/experimental_taintObjectReference.md
+++ b/src/content/reference/react/experimental_taintObjectReference.md
@@ -68,7 +68,7 @@ experimental_taintObjectReference(
-**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untained object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection, a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
+**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untained object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index eab73df5b7..a67eebf77c 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -130,7 +130,7 @@ In this example, the constant `password` is tainted. Then `password` is used to
Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values.
-Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection, a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
+Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index 17ceef5908..a4abf545ad 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -57,6 +57,26 @@ function TodosApp() {
* 如果在重新渲染时传入一个不同的 `subscribe` 函数,React 会用新传入的 `subscribe` 函数重新订阅该 store。你可以通过在组件外声明 `subscribe` 来避免。
+* If the store is mutated during a [non-blocking transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the transition update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store.
+
+* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. The reason is that mutations to the external store cannot be [marked as non-blocking transition updates](/reference/react/useTransition), so they will trigger the nearest [`Suspense` fallback](/reference/react/Suspense), replacing already-rendered content on screen with a loading spinner, which typically makes a poor UX.
+
+ For example, the following are discouraged:
+
+ ```js
+ const LazyProductDetailPage = lazy(() => import('./ProductDetailPage.js'));
+
+ function ShoppingApp() {
+ const selectedProductId = useSyncExternalStore(...);
+
+ // ❌ Calling `use` with a Promise dependent on `selectedProductId`
+ const data = use(fetchItem(selectedProductId))
+
+ // ❌ Conditionally rendering a lazy component based on `selectedProductId`
+ return selectedProductId != null ? : ;
+ }
+ ```
+
---
## 使用 {/*usage*/}
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 9fc1e296e4..120e8d9dfd 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -130,11 +130,13 @@
},
{
"title": "experimental_taintObjectReference",
- "path": "/reference/react/experimental_taintObjectReference"
+ "path": "/reference/react/experimental_taintObjectReference",
+ "canary": true
},
{
"title": "experimental_taintUniqueValue",
- "path": "/reference/react/experimental_taintUniqueValue"
+ "path": "/reference/react/experimental_taintUniqueValue",
+ "canary": true
}
]
},