From f020b53d8b06e0890d9167dd13f966e72e525e46 Mon Sep 17 00:00:00 2001 From: martin rebo Date: Wed, 5 Nov 2025 10:39:59 +0100 Subject: [PATCH 1/8] docs: add missing 'Static APIs' link to React DOM reference page (#8127) --- src/content/reference/react/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index ccba58a061..7693a4cffe 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -28,6 +28,7 @@ React-dom contains features that are only supported for web applications (which * [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications. * [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser). * [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server. +* [Static APIs](/reference/react-dom/static) - The `react-dom/static` APIs let you generate static HTML for React components. ## React Compiler {/*react-compiler*/} From 5c632dc8fb4f37e9968f1b3e3ace580bfed6e7db Mon Sep 17 00:00:00 2001 From: dan Date: Wed, 5 Nov 2025 18:41:50 +0900 Subject: [PATCH 2/8] Nit: wording --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 7693a4cffe..bdb202157f 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -21,7 +21,7 @@ Programmatic React features: ## React DOM {/*react-dom*/} -React-dom contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following: +React DOM contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following: * [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment. * [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components. From 9c0763d38a9475dd77dd479ab83547e20f050cf5 Mon Sep 17 00:00:00 2001 From: Hichem Date: Wed, 5 Nov 2025 22:11:14 +0100 Subject: [PATCH 3/8] fix: correct links for Redwood and TanStack (#8121) * fix: correct link for RedwoodJS to RedwoodSDK in documentation * fix: update links for React Query and TanStack Start in documentation * fix: update Vite installation command to use TypeScript template * fix: update references from React Query to TanStack Query in documentation --- src/content/blog/2024/05/22/react-conf-2024-recap.md | 2 +- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- src/content/learn/build-a-react-app-from-scratch.md | 4 ++-- src/content/learn/creating-a-react-app.md | 4 ++-- src/content/learn/synchronizing-with-effects.md | 2 +- .../eslint-plugin-react-hooks/lints/rules-of-hooks.md | 2 +- src/content/reference/react/useEffect.md | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index 7cb7d42ee9..e224640103 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -112,7 +112,7 @@ Thank you [Ricky Hanlon](https://www.youtube.com/watch?v=FxTZL2U-uKg&t=1263s) fo Thank you [Callstack](https://www.callstack.com/) for building the conference website; and to [Kadi Kraman](https://twitter.com/kadikraman) and the [Expo](https://expo.dev/) team for building the conference mobile app. -Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://redwoodjs.com/), and [Vercel](https://vercel.com). +Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://rwsdk.com/), and [Vercel](https://vercel.com). Thank you to the AV Team for the visuals, stage, and sound; and to the Westin Hotel for hosting us. diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md index 9ced6231c3..6f3e95d811 100644 --- a/src/content/blog/2025/02/14/sunsetting-create-react-app.md +++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md @@ -177,7 +177,7 @@ export default function Dashboard() { } ``` -Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [React Query](https://react-query.tanstack.com/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders. +Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [TanStack Query](https://tanstack.com/query/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders. These libraries work best when integrated with your routing "loader" pattern to specify data dependencies at the route level, which allows the router to optimize your data fetches: 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 185b693b1f..c74fa9afd1 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -34,7 +34,7 @@ The first step is to install a build tool like `vite`, `parcel`, or `rsbuild`. T [Vite](https://vite.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. -{`npm create vite@latest my-app -- --template react`} +{`npm create vite@latest my-app -- --template react-ts`} Vite is opinionated and comes with sensible defaults out of the box. Vite has a rich ecosystem of plugins to support fast refresh, JSX, Babel/SWC, and other common features. See Vite's [React plugin](https://vite.dev/plugins/#vitejs-plugin-react) or [React SWC plugin](https://vite.dev/plugins/#vitejs-plugin-react-swc) and [React SSR example project](https://vite.dev/guide/ssr.html#example-projects) to get started. @@ -97,7 +97,7 @@ Note that fetching data directly in components can lead to slower loading times If you're fetching data from most backends or REST-style APIs, we suggest using: -- [React Query](https://react-query.tanstack.com/) +- [TanStack Query](https://tanstack.com/query/) - [SWR](https://swr.vercel.app/) - [RTK Query](https://redux-toolkit.js.org/rtk-query/overview) diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md index df512cca8e..a65b59f6ef 100644 --- a/src/content/learn/creating-a-react-app.md +++ b/src/content/learn/creating-a-react-app.md @@ -63,8 +63,8 @@ Expo is maintained by [Expo (the company)](https://expo.dev/about). Building app There are other up-and-coming frameworks that are working towards our full stack React vision: -- [TanStack Start (Beta)](https://tanstack.com/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite. -- [RedwoodJS](https://redwoodjs.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications. +- [TanStack Start (Beta)](https://tanstack.com/start/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite. +- [RedwoodSDK](https://rwsdk.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications. diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 7f61a255bb..fa27f8d8f9 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -733,7 +733,7 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches: - **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. -- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). +- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). You can continue fetching data directly in Effects if neither of these approaches suit you. diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md index 56a9d74beb..a364ab67fe 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md @@ -132,7 +132,7 @@ useEffect(() => { -There are better ways to fetch data rather than in a useEffect. Consider using React Query, useSWR, or React Router 6.4+ for data fetching. These solutions handle deduplicating requests, caching responses, and avoiding network waterfalls. +There are better ways to fetch data rather than in a useEffect. Consider using TanStack Query, useSWR, or React Router 6.4+ for data fetching. These solutions handle deduplicating requests, caching responses, and avoiding network waterfalls. Learn more: [Fetching Data](/learn/synchronizing-with-effects#fetching-data) diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index 413e3ebc46..f67f56edaf 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -1050,7 +1050,7 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches: - **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. -- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). +- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). You can continue fetching data directly in Effects if neither of these approaches suit you. From abd1fe01db79041db08d2a3e2bde32c11ad47171 Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Thu, 6 Nov 2025 05:39:44 +0800 Subject: [PATCH 4/8] =?UTF-8?q?docs:=20Remove=20redundant=20symbols=20?= =?UTF-8?q?=E2=80=98=20=E2=80=9C=20=E2=80=99=20(#8101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/act.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md index eff3f891fa..7e1273e3d7 100644 --- a/src/content/reference/react/act.md +++ b/src/content/reference/react/act.md @@ -152,7 +152,7 @@ Don’t forget that dispatching DOM events only works when the DOM container is ## Troubleshooting {/*troubleshooting*/} -### I'm getting an error: "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/} +### I'm getting an error: "The current testing environment is not configured to support act(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/} Using `act` requires setting `global.IS_REACT_ACT_ENVIRONMENT=true` in your test environment. This is to ensure that `act` is only used in the correct environment. From 6a708898a695fc4af8d854101464aa02a4befae8 Mon Sep 17 00:00:00 2001 From: Emmanuel Valentin Date: Wed, 5 Nov 2025 16:21:05 -0600 Subject: [PATCH 5/8] Fix typo in childIds array in initialTravelPlan (#8112) --- src/content/learn/choosing-the-state-structure.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md index 5be2b4d346..f6ed669ab4 100644 --- a/src/content/learn/choosing-the-state-structure.md +++ b/src/content/learn/choosing-the-state-structure.md @@ -1716,7 +1716,7 @@ export const initialTravelPlan = { 34: { id: 34, title: 'Oceania', - childIds: [35, 36, 37, 38, 39, 40,, 41], + childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, From d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 Mon Sep 17 00:00:00 2001 From: PaulyBearCoding <180776718+PaulyBearCoding@users.noreply.github.com> Date: Wed, 5 Nov 2025 18:25:46 -0800 Subject: [PATCH 6/8] Fix incorrect condition in "Chains of computations" example (#8109) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #8097 The refactored example in the "Chains of computations" section uses an incorrect condition that changes the game logic from the original. The original Effect-based code advances the round after 4 gold cards: - Increments first (0→1, 1→2, 2→3, 3→4) - Then checks `goldCardCount > 3` (true when count is 4) The refactored code with `goldCardCount <= 3` allows 5 gold cards: - Checks before incrementing - Allows counts 0, 1, 2, 3 to increment (4 values) - Advances on the 5th card (when count is 4) This fix changes the condition to `goldCardCount < 3`: - Allows counts 0, 1, 2 to increment (3 values) - Advances on the 4th card (when count is 3) - Matches the original behavior Verified by tracing execution logic and building the docs site locally. Co-authored-by: PaulyBearCoding --- src/content/learn/you-might-not-need-an-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 76e58e3072..73be0b1711 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -437,7 +437,7 @@ function Game() { // ✅ Calculate all the next state in the event handler setCard(nextCard); if (nextCard.gold) { - if (goldCardCount <= 3) { + if (goldCardCount < 3) { setGoldCardCount(goldCardCount + 1); } else { setGoldCardCount(0); From 8e76839acc06cfc9f06c13d850510f25806a8255 Mon Sep 17 00:00:00 2001 From: Xleine Date: Fri, 7 Nov 2025 14:27:41 +0800 Subject: [PATCH 7/8] fix conflict --- src/content/blog/2024/05/22/react-conf-2024-recap.md | 6 +----- .../blog/2025/02/14/sunsetting-create-react-app.md | 6 +----- src/content/learn/creating-a-react-app.md | 9 ++------- src/content/learn/synchronizing-with-effects.md | 7 +------ src/content/reference/react/act.md | 6 +----- src/content/reference/react/index.md | 12 +----------- src/content/reference/react/useEffect.md | 7 +------ 7 files changed, 8 insertions(+), 45 deletions(-) diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index dab644f156..73fde1ba16 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -112,11 +112,7 @@ React 和 React Native 团队也在每天结束时进行了问答环节： 感谢 [Callstack](https://www.callstack.com/) 建设大会网站；感谢 [Kadi Kraman](https://twitter.com/kadikraman) 和 [Expo](https://expo.dev/) 团队建设大会移动应用。 -<<<<<<< HEAD -感谢所有赞助商使本次活动得以实现：[Remix](https://remix.run/)、[Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org)、[MUI](https://mui.com/)、[Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore)、[Abbott](https://www.jobs.abbott/software)、[Expo](https://expo.dev/)、[RedwoodJS](https://redwoodjs.com/) 以及 [Vercel](https://vercel.com)。 -======= -Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://rwsdk.com/), and [Vercel](https://vercel.com). ->>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 +感谢所有赞助商使本次活动得以实现：[Remix](https://remix.run/)、[Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org)、[MUI](https://mui.com/)、[Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore)、[Abbott](https://www.jobs.abbott/software)、[Expo](https://expo.dev/)、[RedwoodJS](https://rwsdk.com/) 以及 [Vercel](https://vercel.com)。 感谢音视频团队为我们提供的视觉、舞台和声音；感谢威斯汀酒店为我们提供的住宿。 diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md index 4aae11358d..54d33885e1 100644 --- a/src/content/blog/2025/02/14/sunsetting-create-react-app.md +++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md @@ -177,11 +177,7 @@ export default function Dashboard() { } ``` -<<<<<<< HEAD -在副作用中获取数据意味着用户需要等待更长时间才能看到内容，即使这些数据本可以更早地获取。为了解决这个问题，你可以使用一些数据获取库，例如：[React Query](https://react-query.tanstack.com/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/)，这些库提供了预取数据的功能，使得请求可以在组件渲染之前就开始，从而减少用户等待时间并提升性能 -======= -Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [TanStack Query](https://tanstack.com/query/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders. ->>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 +在副作用中获取数据意味着用户需要等待更长时间才能看到内容，即使这些数据本可以更早地获取。为了解决这个问题，你可以使用一些数据获取库，例如：[TanStack Query](https://tanstack.com/query/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/)，这些库提供了预取数据的功能，使得请求可以在组件渲染之前就开始，从而减少用户等待时间并提升性能。 这些库在与路由的“loader”模式集成时效果最佳，可以在路由级别指定数据依赖关系，从而使路由器能够优化数据获取： diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md index 623b8bcb7e..873c50fd15 100644 --- a/src/content/learn/creating-a-react-app.md +++ b/src/content/learn/creating-a-react-app.md @@ -63,13 +63,8 @@ Expo 由 [Expo 公司](https://expo.dev/about) 维护。使用 Expo 构建应用 还有一些新兴的框架正在努力实现我们的全栈 React 愿景： -<<<<<<< HEAD -- [TanStack Start (Beta)](https://tanstack.com/): TanStack Start 是一个由 TanStack Router 驱动的全栈 React 框架。它使用 Nitro 和 Vite 等工具提供完整的文档服务端渲染、流式传输、服务器函数、打包等功能。 -- [RedwoodJS](https://redwoodjs.com/): Redwood 是一个全栈 React 框架，带有许多预装的包和配置，方便构建全栈 Web 应用。 -======= -- [TanStack Start (Beta)](https://tanstack.com/start/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite. -- [RedwoodSDK](https://rwsdk.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications. ->>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 +- [TanStack Start (Beta)](https://tanstack.com/start/): TanStack Start 是一个由 TanStack Router 驱动的全栈 React 框架。它使用 Nitro 和 Vite 等工具提供完整的文档服务端渲染、流式传输、服务器函数、打包等功能。 +- [RedwoodSDK](https://rwsdk.com/): Redwood 是一个全栈 React 框架，带有许多预装的包和配置，方便构建全栈 Web 应用。 diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 47f3e14f36..d4f377916e 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -732,13 +732,8 @@ function TodoList() { 这些弊端并不仅限于 React。任何库在组件挂载时进行数据获取都会遇到这些问题。与路由处理一样，要做好数据获取并非易事，因此我们推荐以下方法： -<<<<<<< HEAD - **如果你正在使用 [框架](/learn/start-a-new-react-project#full-stack-frameworks) ，请使用其内置的数据获取机制**。现代 React 框架集成了高效的数据获取机制，不会出现上述问题。 -- **否则，请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [React Query](https://tanstack.com/query/latest)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以自己构建解决方案：在底层使用 Effect，但添加对请求的去重、缓存响应以及避免网络瀑布（通过预加载数据或将数据请求提升到路由层次）的逻辑。 -======= -- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. -- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). ->>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 +- **否则，请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [TanStack Query](https://tanstack.com/query/latest)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以自己构建解决方案：在底层使用 Effect，但添加对请求的去重、缓存响应以及避免网络瀑布（通过预加载数据或将数据请求提升到路由层次）的逻辑。 如果这些方法都不适合你，你可以继续直接在 Effect 中获取数据。 diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md index c41750ce6f..4a066b9515 100644 --- a/src/content/reference/react/act.md +++ b/src/content/reference/react/act.md @@ -152,11 +152,7 @@ it.only('can render and update a counter', async () => { ## 疑难解答 {/*troubleshooting*/} -<<<<<<< HEAD -### 出现错误 "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/} -======= -### I'm getting an error: "The current testing environment is not configured to support act(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/} ->>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 +### 出现错误 "The current testing environment is not configured to support act(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/} 使用 `act` 需要在测试环境中设置 `global.IS_REACT_ACT_ENVIRONMENT=true` 。这是为了确保 `act` 仅在正确的环境中使用。 diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index fd0e80d3ba..9b7a7d610d 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -21,7 +21,6 @@ React 参考文档分为以下内容： ## React DOM {/*react-dom*/} -<<<<<<< HEAD React-dom 仅支持在 web 应用程序中使用（在浏览器 DOM 环境中运行）。本节分为以下部分： * [Hook](/reference/react-dom/hooks) —— 适用于在浏览器 DOM 环境中运行的 web 应用程序的 Hook。 @@ -29,16 +28,7 @@ React-dom 仅支持在 web 应用程序中使用（在浏览器 DOM 环境中运 * [API](/reference/react-dom) —— `react-dom` 包含仅在 web 应用程序中支持的方法。 * [客户端 API](/reference/react-dom/client) —— `react-dom/client` API 允许在客户端（浏览器中）渲染 React 组件。 * [服务端 API](/reference/react-dom/server) —— `react-dom/server` API 允许在服务器端将 React 组件渲染为 HTML。 -======= -React DOM contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following: - -* [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment. -* [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components. -* [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications. -* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser). -* [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server. -* [Static APIs](/reference/react-dom/static) - The `react-dom/static` APIs let you generate static HTML for React components. ->>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 +* [静态 API](/reference/react-dom/static) - `react-dom/static` API 允许将 React 组件生成静态 HTML。 ## React 编译器 {/*react-compiler*/} diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index ab637de73c..05b00816c4 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -1049,13 +1049,8 @@ export async function fetchBio(person) { 这些缺点并不仅仅体现在 React 上，它可能出现在所有挂载时请求数据的地方。与路由一样，要做好数据请求并非易事，因此我们推荐以下方法： -<<<<<<< HEAD - **如果正在使用 [框架](/learn/start-a-new-react-project#full-stack-frameworks)，那么请使用其内置的数据获取机制**。现代 React 框架已经集成了高效的数据获取机制，不会受到上述问题的影响。 -- **否则，请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [React Query](https://tanstack.com/query/latest/)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以构建自己的解决方案，在这种情况下，你将在底层使用 Effect，但还需添加逻辑以避免重复请求、缓存响应并避免网络瀑布效应（通过预加载数据或将数据需求提升到路由级别）。 -======= -- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. -- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). ->>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 +- **否则，请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [TanStack Query](https://tanstack.com/query/latest/)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以构建自己的解决方案，在这种情况下，你将在底层使用 Effect，但还需添加逻辑以避免重复请求、缓存响应并避免网络瀑布效应（通过预加载数据或将数据需求提升到路由级别）。 如果这两种方法都不适合你，可以继续直接在 Effect 中请求数据。 From 59e5c5f40a68e0fbd5454fd6ec395d955f984b52 Mon Sep 17 00:00:00 2001 From: Xleine Date: Fri, 7 Nov 2025 14:34:27 +0800 Subject: [PATCH 8/8] translate some tip --- .../reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md index a364ab67fe..8075335040 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md @@ -132,7 +132,7 @@ useEffect(() => { -There are better ways to fetch data rather than in a useEffect. Consider using TanStack Query, useSWR, or React Router 6.4+ for data fetching. These solutions handle deduplicating requests, caching responses, and avoiding network waterfalls. +有比使用 useEffect 更好的方法来获取数据。考虑使用 TanStack Query、useSWR 或者 React Router（v6.4 版本及以上）来获取数据。这些解决方案处理了重复请求、对响应进行缓存并且会避免网络瀑布。 Learn more: [Fetching Data](/learn/synchronizing-with-effects#fetching-data)