diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md
index 003513f729..e47add11fc 100644
--- a/src/content/reference/react-dom/hydrate.md
+++ b/src/content/reference/react-dom/hydrate.md
@@ -46,7 +46,7 @@ React 将会附加到 `domNode` 内部现有的 HTML,并接管有关的 DOM
* `domNode`:在服务器中被渲染为根节点的 [DOM 元素](https://developer.mozilla.org/zh-CN/docs/Web/API/Element)。
-* **可选属性** `callback`:一个函数。如果传递了该参数,React 将会在组件 hydrate 后调用它。
+* **可选属性** `callback`:一个函数。如果传递了该参数,React 将会在组件激活后调用它。
#### 返回值 {/*returns*/}
@@ -54,7 +54,7 @@ React 将会附加到 `domNode` 内部现有的 HTML,并接管有关的 DOM
#### 注意 {/*caveats*/}
* `hydrate` 要求渲染的内容与服务器渲染的内容完全相同。尽管 React 可以修复文本内容的差异,但你应该首先将不匹配视为错误并进行修复。
-* 在开发模式下,React 会在 hydration 期间警告不匹配的错误。如果存在不匹配情况,无法保证属性的差异会被修补。在大多数应用程序中不匹配是很少见的,所以验证所有标记的代价将会很高。因此考虑到性能原因,这是很重要的。
+* 在开发模式下,React 会在激活期间警告不匹配的错误。如果存在不匹配情况,无法保证属性的差异会被修补。在大多数应用程序中不匹配是很少见的,所以验证所有标记的代价将会很高。因此考虑到性能原因,这是很重要的。
* 你的应用程序中可能只有一个 `hydrate` 调用。如果你使用了框架,它可能会为你执行此调用。
* 如果你的应用程序是客户端渲染的,并且没有已经渲染的 HTML,则不支持使用 `hydrate()`。请改用 [render()](/reference/react-dom/render)(适用于 React 17 及以下版本)或 [createRoot()](/reference/react-dom/client/createRoot)(适用于 React 18 及以上版本)。
@@ -72,9 +72,9 @@ hydrate(
, document.getElementById('root'));
不支持使用 `hydrate()` 渲染仅用于客户端的应用程序(没有服务器渲染的 HTML)。请改用 [`render()`](/reference/react-dom/render)(适用于 React 17 及以下版本)或 [`createRoot()`](/reference/react-dom/client/createRoot)(适用于 React 18 及以上版本)。
-### hydrate 服务器渲染的 HTML {/*hydrating-server-rendered-html*/}
+### 激活服务器渲染的 HTML {/*hydrating-server-rendered-html*/}
-在 React 中,hydrate 是指将 React “附加(attach)”到在服务器环境中已由 React 渲染的现有 HTML 上。在 hydrate 期间,React 将尝试将事件监听器附加(attach)到现有标记,并在客户端上接管渲染应用程序。
+在 React 中,激活(hydrate)是指将 React “附加(attach)”到在服务器环境中已由 React 渲染的现有 HTML 上。在激活期间,React 将尝试将事件监听器附加(attach)到现有标记,并在客户端上接管渲染应用程序。
在完全使用 React 构建的应用程序中,**通常只会在第一次启动整个应用程序时,hydrate “根”节点**。
@@ -106,15 +106,15 @@ export default function App() {
通常情况下,你不需要再次调用 `hydrate`,也不需要在更多地方调用它。从此时开始,React 将会管理你的应用程序的 DOM。为了更新 UI,你的组件将会 [使用 state](/reference/react/useState)。
-有关 hydrate 的更多信息,请参阅 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。
+有关激活的更多信息,请参阅 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。
---
-### 抑制不可避免的 hydrate 不匹配错误 {/*suppressing-unavoidable-hydration-mismatch-errors*/}
+### 抑制不可避免的激活内容不匹配错误 {/*suppressing-unavoidable-hydration-mismatch-errors*/}
-如果服务器和客户端之间某个元素的属性或文本内容无法避免不同(比如一个时间戳),你可以禁止 hydrate 警告。
+如果服务器和客户端之间某个元素的属性或文本内容无法避免不同(比如一个时间戳),你可以禁止激活警告。
-使用 `suppressHydrationWarning={true}` 禁止 hydrate 警告:
+使用 `suppressHydrationWarning={true}` 禁止激活警告:
@@ -192,10 +192,10 @@ export default function App() {
-这样,初始渲染过程将呈现与服务器相同的内容,并且避免不匹配的情况,但会在 hydrate 后立即同步并进行额外的渲染。
+这样,初始渲染过程将呈现与服务器相同的内容,并且避免不匹配的情况,但会在激活后立即同步并进行额外的渲染。
-这种方法会使 hydrate 变慢,因为你的组件必须渲染两次,因此要注意在网络不好情况下的用户体验。JavaScript 代码的加载可能比初始 HTML 渲染要晚许多,因此在 hydrate 后立即渲染不同的 UI 可能会让用户感到不适。
+这种方法会使激活变慢,因为你的组件必须渲染两次,因此要注意在网络不好情况下的用户体验。JavaScript 代码的加载可能比初始 HTML 渲染要晚许多,因此在激活后立即渲染不同的 UI 可能会让用户感到不适。
diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md
index c4409ad0f8..668676b7c3 100644
--- a/src/content/reference/react-dom/server/renderToNodeStream.md
+++ b/src/content/reference/react-dom/server/renderToNodeStream.md
@@ -76,4 +76,4 @@ app.use('/', (request, response) => {
});
```
-这里的流会将 React 组件初始输出为非交互式 HTML。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来 hydrate 服务器生成的 HTML 并使其具有交互功能。
+这里的流会将 React 组件初始输出为非交互式 HTML。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来激活服务器生成的 HTML 并使其具有交互功能。
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index 513a4240c9..a40c0892e3 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -178,7 +178,7 @@ app.use('/', (request, response) => {
});
```
-因为你的服务端正在渲染 `
`,所以你还需要在客户端将这个带有 `assetMap` 的组件再渲染一次进行同构,以此避免 hydrate 错误。你可以像下面这样序列化 `assetMap` 之后再传递:
+因为你的服务端正在渲染 `
`,所以你还需要在客户端将这个带有 `assetMap` 的组件再渲染一次进行同构,以此避免激活错误。你可以像下面这样序列化 `assetMap` 之后再传递:
```js {9-10}
// 你需要从你的打包构建工具中获取这个 JSON。
@@ -209,7 +209,7 @@ import App from './App.js';
hydrateRoot(document,
);
```
-这样一来,客户端和服务端都渲染了带有 `assetMap` 属性的 `App`,因此它们是同构的,就不会出现 hydrate 异常错误。
+这样一来,客户端和服务端都渲染了带有 `assetMap` 属性的 `App`,因此它们是同构的,就不会出现激活异常错误。
diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
index 75c78fd083..e2462b5e38 100644
--- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md
+++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
@@ -42,11 +42,11 @@ stream.pipe(response);
#### 返回值 {/*returns*/}
-输出 HTML 字符串的 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams),以此法输出的 HTML 不能被客户端 hydrate。
+输出 HTML 字符串的 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams),以此法输出的 HTML 不能被客户端激活。
#### 注意 {/*caveats*/}
-* `renderToStaticNodeStream` 的输出不能被 hydrate。
+* `renderToStaticNodeStream` 的输出不能被激活。
* 此方法会等待所有 [Suspense边界](/reference/react/Suspense) 完成后才返回输出。
@@ -76,7 +76,7 @@ app.use('/', (request, response) => {
-此方法将会渲染 **无法被 hydrate 的非交互式 HTML**。如果你想将 React 用作简单的静态页面生成器,或者渲染完全静态的内容(如电子邮件),那么这将会很有用。
+此方法将会渲染 **无法被激活的非交互式 HTML**。如果你想将 React 用作简单的静态页面生成器,或者渲染完全静态的内容(如电子邮件),那么这将会很有用。
交互式应用程序应该在服务端使用 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) 并在客户端结合使用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。
diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md
index c48077f83c..1d0d419a1f 100644
--- a/src/content/reference/react-dom/server/renderToString.md
+++ b/src/content/reference/react-dom/server/renderToString.md
@@ -73,7 +73,7 @@ app.use('/', (request, response) => {
});
```
-这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行 hydrate 处理,使其具有交互功能。
+这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行激活处理,使其具有交互功能。
diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
index d1491503b1..2e16a29926 100644
--- a/src/content/reference/react/cache.md
+++ b/src/content/reference/react/cache.md
@@ -226,7 +226,7 @@ async function AnimatedWeatherCard({city}) {
```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
const getUser = cache(async (id) => {
return await db.user.query(id);
-})
+});
async function Profile({id}) {
const user = await getUser(id);
@@ -327,7 +327,7 @@ React 只允许在组件内访问记忆化函数的缓存。在组件外部调
'use client';
function WeatherReport({record}) {
- const avgTemp = useMemo(() => calculateAvg(record)), record);
+ const avgTemp = useMemo(() => calculateAvg(record), record);
// ...
}
diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index 6e56ae639f..774dd40aa2 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -15,7 +15,7 @@ React 参考文档分为以下内容:
编程式 React 功能:
* [Hook](/reference/react/hooks) —— 在组件中使用不同的 React 特性。
-* [组件](/reference/react/components) —— 记录了可以在 JSX 中使用的内置组件。
+* [组件](/reference/react/components) —— 可以在 JSX 中使用的内置组件。
* [API](/reference/react/apis) —— 用于定义组件的有用 API。
* [指示符](/reference/rsc/directives) —— 为与 React 服务器组件兼容的捆绑器提供指示。
diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md
index 2fb092d5f3..d791003324 100644
--- a/src/content/reference/react/lazy.md
+++ b/src/content/reference/react/lazy.md
@@ -80,7 +80,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
}>
Preview
-
+
```
在这个例子中,`MarkdownPreview` 的代码只有在你尝试渲染它时才会被加载。如果 `MarkdownPreview` 还没有加载完成,将显示 `Loading`。请尝试勾选复选框:
diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
index 24f9bbcbc3..9abe84e749 100644
--- a/src/content/reference/react/useActionState.md
+++ b/src/content/reference/react/useActionState.md
@@ -57,7 +57,7 @@ function StatefulForm({}) {
form state 是一个只在表单被提交触发 action 后才会被更新的值。如果该表单没有被提交,该值会保持传入的初始值不变。
-如果配合 Server Action 一起使用,`useActionState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。
+如果配合 Server Action 一起使用,`useActionState` 允许与表单交互的服务器的返回值在激活完成前显示。
[请参阅下方更多示例](#usage)。
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 7de29665f7..fec265a83b 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -1733,7 +1733,7 @@ function Page({ url, shoppingCart }) {
### 在服务器和客户端上显示不同的内容 {/*displaying-different-content-on-the-server-and-the-client*/}
-如果你的应用程序使用服务端([直接](/reference/react-dom/server) 或通过 [框架](/learn/start-a-new-react-project#production-grade-react-frameworks))渲染,你的组件将会在两个不同的环境中渲染。在服务器上,它将渲染生成初始 HTML。在客户端,React 将再次运行渲染代码,以便将事件处理附加到该 HTML 上。这就是为什么要让 [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) 发挥作用,你的初始渲染输出必须在客户端和服务器上完全相同的原因。
+如果你的应用程序使用服务端([直接](/reference/react-dom/server) 或通过 [框架](/learn/start-a-new-react-project#production-grade-react-frameworks))渲染,你的组件将会在两个不同的环境中渲染。在服务器上,它将渲染生成初始 HTML。在客户端,React 将再次运行渲染代码,以便将事件处理附加到该 HTML 上。这就是为什么要让 [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) 发挥作用,你的初始渲染输出必须在客户端和服务器上完全相同。
在极少数情况下,你可能需要在客户端上显示不同的内容。例如,如果你的应用从 [`localStorage`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) 中读取某些数据,服务器上肯定不可能做到这一点。以下是这如何实现的:
@@ -1753,7 +1753,7 @@ function MyComponent() {
}
```
-当应用加载时,用户首先会看到初始渲染的输出。然后,当它加载完并进行 hydrate 时,Effect 将会运行并且将 `didMount` 设置为 `true`,从而触发重新渲染。这将切换到仅在客户端的渲染输出。Effect 不在服务器上运行,这就是为什么 `didMount` 在初始服务器渲染期间为 `false` 的原因。
+当应用加载时,用户首先会看到初始渲染的输出。然后,当它加载完并进行激活时,Effect 将会运行并且将 `didMount` 设置为 `true`,从而触发重新渲染。这将切换到仅在客户端的渲染输出。Effect 不在服务器上运行,这就是 `didMount` 在初始服务器渲染期间为 `false` 的原因。
谨慎使用此模式。请记住,网络连接速度较慢的用户将在相当长的时间内(可能是数秒钟)看到初始内容,因此你不希望对组件的外观进行突兀的更改。在许多情况下,你可以通过使用 CSS 条件性地显示不同的内容来避免这种需要。
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index 93747ff5f7..16497efc2b 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -179,7 +179,7 @@ input { margin: 5px; }
`useId` 的主要好处是 React 确保它能够与 [服务端渲染](/reference/react-dom/server)一起工作。 在服务器渲染期间,你的组件生成输出 HTML。随后,在客户端,[hydration](/reference/react-dom/client/hydrateRoot) 会将你的事件处理程序附加到生成的 HTML 上。由于 hydration,客户端必须匹配服务器输出的 HTML。
-使用递增计数器很难保证这一点,因为客户端组件被 hydrate 处理后的顺序可能与服务器 HTML 的顺序不匹配。调用 `useId` 可以确保 hydration 正常工作,以及服务器和客户端之间的输出相匹配。
+使用递增计数器很难保证这一点,因为客户端组件被激活处理后的顺序可能与服务器 HTML 的顺序不匹配。调用 `useId` 可以确保激活正常工作,以及服务器和客户端之间的输出相匹配。
在 React 内部,调用组件的“父路径”生成 `useId`。这就是为什么如果客户端和服务器的树相同,不管渲染顺序如何,“父路径”始终都匹配。
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 1532ba28f1..a48dab6a26 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -67,6 +67,8 @@ function Tooltip() {
* `useLayoutEffect` 内部的代码和所有计划的状态更新阻塞了浏览器重新绘制屏幕。如果过度使用,这会使你的应用程序变慢。如果可能的话,尽量选择 [`useEffect`](/reference/react/useEffect)。
+* 如果你在 `useLayoutEffect` 内部触发状态更新,React 将立即执行所有剩余的 Effects,包括 `useEffect`。
+
---
## 用法 {/*usage*/}
@@ -251,7 +253,7 @@ export default function TooltipContainer({ children, x, y, contentRef }) {
-注意,即使 `Tooltip` 组件需要两次渲染(首先,使用初始值为 0 的 `tooltipHeight` 渲染,然后使用实际测量的高度渲染),你也只能看到最终结果。这就是为什么在这个例子中需要 `useLayoutEffect` 而不是 [`useEffect`](/reference/react/useEffect) 的原因。让我们来看看下面的细节差别。
+注意,即使 `Tooltip` 组件需要两次渲染(首先,使用初始值为 0 的 `tooltipHeight` 渲染,然后使用实际测量的高度渲染),你也只能看到最终结果。这就是在这个例子中需要 `useLayoutEffect` 而不是 [`useEffect`](/reference/react/useEffect) 的原因。让我们来看看下面的细节差别。
@@ -734,6 +736,6 @@ export default function TooltipContainer({ children, x, y, contentRef }) {
- 或者,[将你的组件标记为仅在客户端上渲染](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) 。这告诉 React 在服务器渲染期间将其内容替换为最接近的 [``](/reference/react/Suspense) 处的表示加载中的后备方案(例如,一个加载动画或者光效)。
-- 或者,只有在水合之后,使用 `useLayoutEffect` 渲染组件。保留一个初始化为 `false` 的 `isMounted` 布尔状态,并在 `useEffect` 调用中将其设置为 `true`。然后你的渲染逻辑就会像 `return isMounted ? : ` 这样。在服务端和水合过程中,用户将看到 `FallbackContent`,它不应该调用 `useLayoutEffect`。然后 React 将用 `RealContent` 替换它,`RealContent` 仅在客户端上运行并且可以包含 `useLayoutEffect` 调用。
+- 或者,只有在激活之后,使用 `useLayoutEffect` 渲染组件。保留一个初始化为 `false` 的 `isMounted` 布尔状态,并在 `useEffect` 调用中将其设置为 `true`。然后你的渲染逻辑就会像 `return isMounted ? : ` 这样。在服务端和激活过程中,用户将看到 `FallbackContent`,它不应该调用 `useLayoutEffect`。然后 React 将用 `RealContent` 替换它,`RealContent` 仅在客户端上运行并且可以包含 `useLayoutEffect` 调用。
- 如果你将组件与外部数据存储同步,并且依赖 `useLayouteffect` 的原因不同于测量布局,可以考虑使用 [支持服务端渲染](/reference/react/useSyncExternalStore#adding-support-for-server-rendering) 的 [`useSyncExternalStore`](/reference/react/useSyncExternalStore)。
diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md
index 5a71941904..ad82a4a425 100644
--- a/src/content/reference/react/useState.md
+++ b/src/content/reference/react/useState.md
@@ -439,7 +439,7 @@ setForm({
-#### 表单(对象){/*form-object*/}
+#### 表单(对象) {/*form-object*/}
在此示例中,`form` 状态变量保存一个对象。每个输入框都有一个变更处理函数,用整个表单的下一个状态调用 `setForm`。`{ ...form }` 展开语法确保替换状态对象而不是改变它。
@@ -512,7 +512,7 @@ input { margin-left: 5px; }
-#### 表单(嵌套对象){/*form-nested-object*/}
+#### 表单(嵌套对象) {/*form-nested-object*/}
在此示例中,状态更为嵌套。当你更新嵌套状态时,你需要复制一份正在更新的对象,以及向上“包含”它的所有对象。阅读 [更新嵌套对象](/learn/updating-objects-in-state#updating-a-nested-object) 以了解更多。
@@ -1261,7 +1261,7 @@ setTodos(prevTodos => {
});
```
-现在,这个更新函数是纯粹的,所以多调用一次不会对行为产生影响。这就是为什么 React 调用它两次可以帮助你找到错误的原因。**只有组件、初始化函数和更新函数需要是纯粹的**。事件处理函数不需要是纯粹的,所以 React 不会两次调用你的事件处理函数。
+现在,这个更新函数是纯粹的,所以多调用一次不会对行为产生影响。这就是 React 调用它两次可以帮助你找到错误的原因。**只有组件、初始化函数和更新函数需要是纯粹的**。事件处理函数不需要是纯粹的,所以 React 不会两次调用你的事件处理函数。
阅读 [保持组件纯粹](/learn/keeping-components-pure) 以了解更多信息。
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index f29cab2947..606a909d5c 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -41,11 +41,11 @@ function TodosApp() {
#### 参数 {/*parameters*/}
-* `subscribe`:一个函数,接收一个单独的 `callback` 参数并把它订阅到 store 上。当 store 发生改变,它应当调用被提供的 `callback`。这会导致组件重新渲染。`subscribe` 函数会返回清除订阅的函数。
+* `subscribe`:一个函数,接收一个单独的 `callback` 参数并把它订阅到 store 上。当 store 发生改变时会调用提供的 `callback`,这将导致 React 重新调用 `getSnapshot` 并在需要的时候重新渲染组件。`subscribe` 函数会返回清除订阅的函数。
* `getSnapshot`:一个函数,返回组件需要的 store 中的数据快照。在 store 不变的情况下,重复调用 `getSnapshot` 必须返回同一个值。如果 store 改变,并且返回值也不同了(用 [`Object.is`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 比较),React 就会重新渲染组件。
-* **可选** `getServerSnapshot`:一个函数,返回 store 中数据的初始快照。它只会在服务端渲染时,以及在客户端进行服务端渲染内容的 hydration 时被用到。快照在服务端与客户端之间必须相同,它通常是从服务端序列化并传到客户端的。如果你忽略此参数,在服务端渲染这个组件会抛出一个错误。
+* **可选** `getServerSnapshot`:一个函数,返回 store 中数据的初始快照。它只会在服务端渲染时,以及在客户端进行服务端渲染内容的激活时被用到。快照在服务端与客户端之间必须相同,它通常是从服务端序列化并传到客户端的。如果你忽略此参数,在服务端渲染这个组件会抛出一个错误。
#### 返回值 {/*returns*/}
diff --git a/vercel.json b/vercel.json
index eac0efb9c4..8b0546e372 100644
--- a/vercel.json
+++ b/vercel.json
@@ -24,6 +24,11 @@
"destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
"permanent": false
},
+ {
+ "source": "/docs/lists-and-keys",
+ "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
+ "permanent": false
+ },
{
"source": "/link/invalid-hook-call",
"destination": "/warnings/invalid-hook-call-warning",