Back to Details

react19-concurrent-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React 19 Concurrent Patterns

React 19 并发模式

React 19 introduced new APIs that complement the migration work. This skill covers two concerns:
  1. Preserve existing React 18 concurrent patterns that must not be broken during migration
  2. Adopt new React 19 APIs worth introducing after migration stabilizes
React 19 推出了可辅助迁移工作的新API。本内容涵盖两大注意事项：
  1. 保留 现有React 18并发模式，迁移过程中绝对不能破坏这些模式
  2. 采用 迁移稳定后值得引入的React 19新API

Part 1 Preserve: React 18 Concurrent Patterns That Must Survive the Migration

第一部分 保留：迁移过程中必须留存的React 18并发模式

These patterns exist in React 18 codebases and must not be accidentally removed or broken:
这些模式存在于React 18代码库中，不得被意外删除或破坏：

createRoot Already Migrated by the R18 Orchestra

createRoot 已由R18 orchestra完成迁移

If the R18 orchestra already ran, 
ReactDOM.render
→ 
createRoot
is done. Verify it's correct:
jsx
// CORRECT React 19 root (same as React 18):
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
如果已经运行了R18 orchestra，那么
ReactDOM.render
→ 
createRoot
的替换已经完成，请验证其正确性：
jsx
// CORRECT React 19 root (same as React 18):
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

useTransition No Migration Needed

useTransition 无需迁移

useTransition
from React 18 works identically in React 19. Do not touch these patterns during migration:
jsx
// React 18 useTransition  unchanged in React 19:
const [isPending, startTransition] = useTransition();

function handleClick() {
  startTransition(() => {
    setFilteredResults(computeExpensiveFilter(input));
  });
}
React 18 中的
useTransition
在React 19中运行逻辑完全一致，迁移过程中不要修改这些模式：
jsx
// React 18 useTransition  unchanged in React 19:
const [isPending, startTransition] = useTransition();

function handleClick() {
  startTransition(() => {
    setFilteredResults(computeExpensiveFilter(input));
  });
}

useDeferredValue No Migration Needed

useDeferredValue 无需迁移

jsx
// React 18 useDeferredValue  unchanged in React 19:
const deferredQuery = useDeferredValue(query);
jsx
// React 18 useDeferredValue  unchanged in React 19:
const deferredQuery = useDeferredValue(query);

Suspense for Code Splitting No Migration Needed

用于代码分割的Suspense 无需迁移

jsx
// React 18 Suspense with lazy  unchanged in React 19:
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}
jsx
// React 18 Suspense with lazy  unchanged in React 19:
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

Part 2 React 19 New APIs

第二部分 React 19 新API

These are worth adopting in a post-migration cleanup sprint. Do not introduce these DURING the migration stabilize first.
For full patterns on each new API, read:
  • references/react19-use.md
     the 
    use()
    hook for promises and context
  • references/react19-actions.md
     Actions, useActionState, useFormStatus, useOptimistic
  • references/react19-suspense.md
     Suspense for data fetching (the new pattern)
这些API适合在迁移完成后的清理迭代中引入，不要在迁移过程中添加，请先保证迁移稳定。
要了解每个新API的完整使用模式，请阅读：
  • references/react19-use.md
     用于处理promise和context的
    use()
    钩子
  • references/react19-actions.md
     Actions、useActionState、useFormStatus、useOptimistic
  • references/react19-suspense.md
     用于数据请求的Suspense（新模式）

Migration Safety Rules

迁移安全规则

During the React 19 migration itself, these concurrent-mode patterns must be left completely untouched:
bash
undefined
在React 19迁移过程中，这些并发模式必须完全保持原样：
bash
undefined

Verify nothing touched these during migration:

Verify nothing touched these during migration:

grep -rn "useTransition|useDeferredValue|Suspense|startTransition"
src/ --include=".js" --include=".jsx" | grep -v ".test."

If the migrator touched any of these files, review the changes  the migration should only have modified React API surface (forwardRef, defaultProps, etc.), never concurrent mode logic.
grep -rn "useTransition|useDeferredValue|Suspense|startTransition"
src/ --include=".js" --include=".jsx" | grep -v ".test."

如果迁移工具修改了任何包含这些内容的文件，请审核变更：迁移应该只修改React表层API（forwardRef、defaultProps等），绝对不能改动并发模式逻辑。