重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
npx skills add https://github.com/noklip-io/agent-skills --skill react-19本技能聚焦于 React 19 中发生了哪些变化。并非完整的 React 参考文档。
如果从 18 之前的版本升级,这些变更已累积并且现在是强制性的:
| 变更 | 引入版本 | React 19 状态 |
|---|---|---|
createRoot / hydrateRoot | React 18 | 必需(ReactDOM.render 已移除) |
| 并发渲染 | React 18 | 所有 R19 特性的基础 |
| 自动批处理 | React 18 | 默认行为 |
useId, |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
useSyncExternalStore| React 18 |
| 稳定,常用 |
| Hooks(新代码不使用类组件) | React 16.8 | 新特性的唯一途径 |
createContext(非遗留版本) | React 16.3 | 必需(遗留 Context 已移除) |
| 错误边界 | React 16 | 现在有更好的错误回调 |
迁移路径: 首先升级到 React 18.3(显示弃用警告),然后升级到 19。
React 19 代表了关于如何思考 React 的根本性转变:
| 旧思维 | 新思维 |
|---|---|
| 默认客户端渲染 | 服务器优先(RSC 默认) |
| 手动记忆化 | 编译器处理 |
使用 useEffect 获取数据 | 异步服务器组件 |
使用 useState 处理表单 | 表单操作 |
| 加载状态布尔值 | Suspense 边界 |
| 优化所有内容 | 编写正确的代码,编译器优化 |
关于思维模型的变化,请参阅 references/paradigm-shifts.md。
关于应停止的做法,请参阅 references/anti-patterns.md。
| 特性 | React 18 | React 19+ |
|---|---|---|
| 记忆化 | 手动(useMemo, useCallback, memo) | React 编译器(自动)或手动 |
| 转发 refs | forwardRef() 包装器 | ref 作为常规属性 |
| Context 提供者 | <Context.Provider value={}> | <Context value={}> |
| 表单状态 | 使用 useState 自定义 | useActionState 钩子 |
| 乐观更新 | 手动状态管理 | useOptimistic 钩子 |
| 读取 Promise | 渲染中不可能 | use() 钩子 |
| 条件性 Context | 不可能 | 条件语句后使用 use(Context) |
| 表单挂起状态 | 手动跟踪 | useFormStatus 钩子 |
| Ref 清理 | 卸载时传递 null | 返回清理函数 |
| 文档元数据 | react-helmet 或手动 | 原生 <title>, <meta>, <link> |
| 用状态隐藏/显示 UI | 卸载/重新挂载(状态丢失) | <Activity> 组件(19.2+) |
| 非响应式 Effect 逻辑 | 添加到依赖项或抑制 lint | useEffectEvent 钩子(19.2+) |
| 自定义元素 | 部分支持 | 完全支持(属性作为属性) |
| 水合错误 | 多个模糊错误 | 单个错误并显示差异 |
启用 React 编译器后,手动记忆化是可选的,而非禁止的:
// React Compiler handles this automatically
function Component({ items }) {
const filtered = items.filter(x => x.active);
const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));
const handleClick = (id) => console.log(id);
return <List items={sorted} onClick={handleClick} />;
}
// Manual memoization still works as escape hatch for fine-grained control
const filtered = useMemo(() => expensiveOperation(items), [items]);
const handleClick = useCallback((id) => onClick(id), [onClick]);
何时在 React 编译器中使用手动记忆化:
详情请参阅 references/react-compiler.md。
// React 19: ref is just a prop
function Input({ placeholder, ref }) {
return <input placeholder={placeholder} ref={ref} />;
}
// Usage - no change
const inputRef = useRef(null);
<Input ref={inputRef} placeholder="Enter text" />
// forwardRef still works but will be deprecated
// Codemod: npx codemod@latest react/19/replace-forward-ref
// React 19: Return cleanup function from ref callback
<input
ref={(node) => {
// Setup
node?.focus();
// Return cleanup (called on unmount or ref change)
return () => {
console.log('Cleanup');
};
}}
/>
// React 18: Received null on unmount (still works, but cleanup preferred)
<input ref={(node) => {
if (node) { /* setup */ }
else { /* cleanup */ }
}} />
const ThemeContext = createContext('light');
// React 19: Use Context directly
function App({ children }) {
return (
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}
// React 18: Required .Provider (still works, will be deprecated)
<ThemeContext.Provider value="dark">
{children}
</ThemeContext.Provider>
import { useActionState } from 'react';
function Form() {
const [error, submitAction, isPending] = useActionState(
async (prevState, formData) => {
const result = await saveData(formData.get('name'));
if (result.error) return result.error;
redirect('/success');
return null;
},
null // initial state
);
return (
<form action={submitAction}>
<input name="name" disabled={isPending} />
<button disabled={isPending}>
{isPending ? 'Saving...' : 'Save'}
</button>
{error && <p className="error">{error}</p>}
</form>
);
}
import { useOptimistic } from 'react';
function Messages({ messages, sendMessage }) {
const [optimisticMessages, addOptimistic] = useOptimistic(
messages,
(state, newMessage) => [...state, { ...newMessage, sending: true }]
);
async function handleSubmit(formData) {
const message = { text: formData.get('text'), id: Date.now() };
addOptimistic(message); // Show immediately
await sendMessage(message); // Reverts on error
}
return (
<form action={handleSubmit}>
{optimisticMessages.map(m => (
<div key={m.id} style={{ opacity: m.sending ? 0.5 : 1 }}>
{m.text}
</div>
))}
<input name="text" />
</form>
);
}
import { use, Suspense } from 'react';
// Read promises (suspends until resolved)
function Comments({ commentsPromise }) {
const comments = use(commentsPromise);
return comments.map(c => <p key={c.id}>{c.text}</p>);
}
// Usage with Suspense
<Suspense fallback={<Spinner />}>
<Comments commentsPromise={fetchComments()} />
</Suspense>
// Conditional context reading (not possible with useContext!)
function Theme({ showTheme }) {
if (!showTheme) return <div>Plain</div>;
const theme = use(ThemeContext); // Can be called conditionally!
return <div style={{ color: theme.primary }}>Themed</div>;
}
import { useFormStatus } from 'react-dom';
// Must be used inside a <form> - reads parent form status
function SubmitButton() {
const { pending, data, method, action } = useFormStatus();
return (
<button disabled={pending}>
{pending ? 'Submitting...' : 'Submit'}
</button>
);
}
function Form() {
return (
<form action={serverAction}>
<input name="email" />
<SubmitButton /> {/* Reads form status via context */}
</form>
);
}
完整的 API 详情请参阅 references/new-hooks.md。
// Pass function directly to form action
<form action={async (formData) => {
'use server';
await saveToDatabase(formData);
}}>
<input name="email" type="email" />
<button type="submit">Subscribe</button>
</form>
// Button-level actions
<form>
<button formAction={saveAction}>Save</button>
<button formAction={deleteAction}>Delete</button>
</form>
// Manual form reset
import { requestFormReset } from 'react-dom';
requestFormReset(formElement);
// Automatically hoisted to <head> - works in any component
function BlogPost({ post }) {
return (
<article>
<title>{post.title}</title>
<meta name="description" content={post.excerpt} />
<meta name="author" content={post.author} />
<link rel="canonical" href={post.url} />
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
function App() {
// DNS prefetch
prefetchDNS('https://api.example.com');
// Establish connection early
preconnect('https://fonts.googleapis.com');
// Preload resources
preload('https://example.com/font.woff2', { as: 'font' });
preload('/hero.jpg', { as: 'image' });
// Load and execute script eagerly
preinit('https://example.com/analytics.js', { as: 'script' });
return <main>...</main>;
}
// precedence controls insertion order and deduplication
function Component() {
return (
<>
<link rel="stylesheet" href="/base.css" precedence="default" />
<link rel="stylesheet" href="/theme.css" precedence="high" />
<div className="styled">Content</div>
</>
);
}
// React ensures stylesheets load before Suspense boundary reveals
<Suspense fallback={<Skeleton />}>
<link rel="stylesheet" href="/feature.css" precedence="default" />
<FeatureComponent />
</Suspense>
React 19 增加了对自定义元素(Web 组件)的完全支持。
// Props matching element properties are assigned as properties
// Others are assigned as attributes
<my-element
stringAttr="hello" // Attribute (string)
complexProp={{ foo: 'bar' }} // Property (object)
onCustomEvent={handleEvent} // Property (function)
/>
客户端: React 检查元素实例上是否存在该属性。如果存在,则作为属性赋值;否则,作为属性赋值。
服务器端(SSR): 基本类型(字符串、数字)渲染为属性。对象、函数、符号从 HTML 中省略。
// Define custom element
class MyElement extends HTMLElement {
constructor() {
super();
this.data = undefined; // React will assign to this property
}
connectedCallback() {
this.textContent = JSON.stringify(this.data);
}
}
customElements.define('my-element', MyElement);
// Use in React
<my-element data={{ items: [1, 2, 3] }} />
React 19 显示一个带有差异的单一错误,而不是多个模糊的错误:
Uncaught Error: Hydration failed because the server rendered HTML
didn't match the client.
<App>
<span>
+ Client
- Server
React 19 优雅地处理浏览器扩展或第三方脚本插入的元素:
<head> 和 <body> 中的意外标签(无不匹配错误)suppressHydrationWarning| 已移除 | 迁移方案 |
|---|---|
ReactDOM.render() | createRoot().render() |
ReactDOM.hydrate() | hydrateRoot() |
unmountComponentAtNode() | root.unmount() |
ReactDOM.findDOMNode() | 使用 refs |
propTypes | TypeScript 或移除 |
defaultProps(函数) | ES6 默认参数 |
| 字符串 refs | 回调 refs 或 useRef |
| 遗留 Context | createContext |
React.createFactory | JSX |
react-dom/test-utils | act 从 'react' 导入 |
迁移指南请参阅 references/deprecations.md。
// useRef requires argument
const ref = useRef<HTMLDivElement>(null); // Required
const ref = useRef(); // Error in React 19
// Ref callbacks must not return values (except cleanup)
<div ref={(node) => { instance = node; }} /> // Correct
<div ref={(node) => (instance = node)} /> // Error - implicit return
// ReactElement props are now unknown (not any)
type Props = ReactElement['props']; // unknown in R19, any in R18
// JSX namespace - import explicitly
import type { JSX } from 'react';
代码修改工具请参阅 references/typescript-changes.md。
# Run all React 19 codemods
npx codemod@latest react/19/migration-recipe
# Individual codemods
npx codemod@latest react/19/replace-reactdom-render
npx codemod@latest react/19/replace-string-ref
npx codemod@latest react/19/replace-act-import
npx codemod@latest react/19/replace-use-form-state
npx codemod@latest react/prop-types-typescript
# TypeScript types
npx types-react-codemod@latest preset-19 ./src
// Named imports (recommended)
import { useState, useEffect, useRef, use } from 'react';
import { createRoot } from 'react-dom/client';
import { useFormStatus } from 'react-dom';
// Default import still works but named preferred
import React from 'react'; // Works but not recommended
// React 19 error handling options
const root = createRoot(container, {
onUncaughtError: (error, errorInfo) => {
// Errors not caught by Error Boundary
console.error('Uncaught:', error, errorInfo.componentStack);
},
onCaughtError: (error, errorInfo) => {
// Errors caught by Error Boundary
reportToAnalytics(error);
},
onRecoverableError: (error, errorInfo) => {
// Errors React recovered from automatically
console.warn('Recovered:', error);
}
});
关于 Suspense 模式和错误边界,请参阅 references/suspense-streaming.md。
隐藏/显示 UI 同时保留状态(类似于后台标签页):
import { Activity } from 'react';
// State preserved when hidden, Effects cleaned up
<Activity mode={isVisible ? 'visible' : 'hidden'}>
<ExpensiveComponent />
</Activity>
从 Effects 中提取非响应式逻辑,无需添加依赖项:
import { useEffect, useEffectEvent } from 'react';
function Chat({ roomId, theme }) {
// Reads theme without making it a dependency
const onConnected = useEffectEvent(() => {
showNotification(`Connected!`, theme);
});
useEffect(() => {
const conn = connect(roomId);
conn.on('connected', onConnected);
return () => conn.disconnect();
}, [roomId]); // theme NOT in deps - won't reconnect on theme change
}
完整的 19.1+ 和 19.2 特性请参阅 references/react-19-2-features.md。
| 文档 | 内容 |
|---|---|
| paradigm-shifts.md | 思维模型变化 - 如何在 React 19 中_思考_ |
| anti-patterns.md | 应停止的做法 - 过时的模式 |
| react-19-2-features.md | React 19.1+ 和 19.2 特性(Activity, useEffectEvent) |
| new-hooks.md | 19.0 钩子的完整 API |
| server-components.md | RSC, 服务器操作, 指令 |
| suspense-streaming.md | Suspense, 流式传输, 错误处理 |
| react-compiler.md | 自动记忆化详情 |
| deprecations.md | 已移除的 API 及迁移指南 |
| typescript-changes.md | 类型变更和代码修改工具 |
每周安装次数
53
仓库
GitHub 星标数
1
首次出现
2026年1月21日
安全审计
安装于
codex41
opencode41
gemini-cli40
cursor39
claude-code36
github-copilot33
This skill focuses on what changed in React 19. Not a complete React reference.
If upgrading from pre-18 versions, these changes accumulated and are now mandatory :
| Change | Introduced | React 19 Status |
|---|---|---|
createRoot / hydrateRoot | React 18 | Required (ReactDOM.render removed) |
| Concurrent rendering | React 18 | Foundation for all R19 features |
| Automatic batching | React 18 | Default behavior |
useId, useSyncExternalStore | React 18 | Stable, commonly used |
| Hooks (no classes for new code) | React 16.8 | Only path for new features |
createContext (not legacy) | React 16.3 | Required (legacy Context removed) |
| Error Boundaries | React 16 | Now with better error callbacks |
Migration path: Upgrade to React 18.3 first (shows deprecation warnings), then to 19.
React 19 represents fundamental shifts in how to think about React:
| Old Thinking | New Thinking |
|---|---|
| Client-side by default | Server-first (RSC default) |
| Manual memoization | Compiler handles it |
useEffect for data | async Server Components |
useState for forms | Form Actions |
| Loading state booleans | Suspense boundaries |
| Optimize everything | Write correct code, compiler optimizes |
See references/paradigm-shifts.md for the mental model changes.
See references/anti-patterns.md for what to stop doing.
| Feature | React 18 | React 19+ |
|---|---|---|
| Memoization | Manual (useMemo, useCallback, memo) | React Compiler (automatic) or manual |
| Forward refs | forwardRef() wrapper | ref as regular prop |
| Context provider | <Context.Provider value={}> | <Context value={}> |
With React Compiler enabled, manual memoization is optional, not forbidden :
// React Compiler handles this automatically
function Component({ items }) {
const filtered = items.filter(x => x.active);
const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));
const handleClick = (id) => console.log(id);
return <List items={sorted} onClick={handleClick} />;
}
// Manual memoization still works as escape hatch for fine-grained control
const filtered = useMemo(() => expensiveOperation(items), [items]);
const handleClick = useCallback((id) => onClick(id), [onClick]);
When to use manual memoization with React Compiler:
See references/react-compiler.md for details.
// React 19: ref is just a prop
function Input({ placeholder, ref }) {
return <input placeholder={placeholder} ref={ref} />;
}
// Usage - no change
const inputRef = useRef(null);
<Input ref={inputRef} placeholder="Enter text" />
// forwardRef still works but will be deprecated
// Codemod: npx codemod@latest react/19/replace-forward-ref
// React 19: Return cleanup function from ref callback
<input
ref={(node) => {
// Setup
node?.focus();
// Return cleanup (called on unmount or ref change)
return () => {
console.log('Cleanup');
};
}}
/>
// React 18: Received null on unmount (still works, but cleanup preferred)
<input ref={(node) => {
if (node) { /* setup */ }
else { /* cleanup */ }
}} />
const ThemeContext = createContext('light');
// React 19: Use Context directly
function App({ children }) {
return (
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}
// React 18: Required .Provider (still works, will be deprecated)
<ThemeContext.Provider value="dark">
{children}
</ThemeContext.Provider>
import { useActionState } from 'react';
function Form() {
const [error, submitAction, isPending] = useActionState(
async (prevState, formData) => {
const result = await saveData(formData.get('name'));
if (result.error) return result.error;
redirect('/success');
return null;
},
null // initial state
);
return (
<form action={submitAction}>
<input name="name" disabled={isPending} />
<button disabled={isPending}>
{isPending ? 'Saving...' : 'Save'}
</button>
{error && <p className="error">{error}</p>}
</form>
);
}
import { useOptimistic } from 'react';
function Messages({ messages, sendMessage }) {
const [optimisticMessages, addOptimistic] = useOptimistic(
messages,
(state, newMessage) => [...state, { ...newMessage, sending: true }]
);
async function handleSubmit(formData) {
const message = { text: formData.get('text'), id: Date.now() };
addOptimistic(message); // Show immediately
await sendMessage(message); // Reverts on error
}
return (
<form action={handleSubmit}>
{optimisticMessages.map(m => (
<div key={m.id} style={{ opacity: m.sending ? 0.5 : 1 }}>
{m.text}
</div>
))}
<input name="text" />
</form>
);
}
import { use, Suspense } from 'react';
// Read promises (suspends until resolved)
function Comments({ commentsPromise }) {
const comments = use(commentsPromise);
return comments.map(c => <p key={c.id}>{c.text}</p>);
}
// Usage with Suspense
<Suspense fallback={<Spinner />}>
<Comments commentsPromise={fetchComments()} />
</Suspense>
// Conditional context reading (not possible with useContext!)
function Theme({ showTheme }) {
if (!showTheme) return <div>Plain</div>;
const theme = use(ThemeContext); // Can be called conditionally!
return <div style={{ color: theme.primary }}>Themed</div>;
}
import { useFormStatus } from 'react-dom';
// Must be used inside a <form> - reads parent form status
function SubmitButton() {
const { pending, data, method, action } = useFormStatus();
return (
<button disabled={pending}>
{pending ? 'Submitting...' : 'Submit'}
</button>
);
}
function Form() {
return (
<form action={serverAction}>
<input name="email" />
<SubmitButton /> {/* Reads form status via context */}
</form>
);
}
See references/new-hooks.md for complete API details.
// Pass function directly to form action
<form action={async (formData) => {
'use server';
await saveToDatabase(formData);
}}>
<input name="email" type="email" />
<button type="submit">Subscribe</button>
</form>
// Button-level actions
<form>
<button formAction={saveAction}>Save</button>
<button formAction={deleteAction}>Delete</button>
</form>
// Manual form reset
import { requestFormReset } from 'react-dom';
requestFormReset(formElement);
// Automatically hoisted to <head> - works in any component
function BlogPost({ post }) {
return (
<article>
<title>{post.title}</title>
<meta name="description" content={post.excerpt} />
<meta name="author" content={post.author} />
<link rel="canonical" href={post.url} />
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
function App() {
// DNS prefetch
prefetchDNS('https://api.example.com');
// Establish connection early
preconnect('https://fonts.googleapis.com');
// Preload resources
preload('https://example.com/font.woff2', { as: 'font' });
preload('/hero.jpg', { as: 'image' });
// Load and execute script eagerly
preinit('https://example.com/analytics.js', { as: 'script' });
return <main>...</main>;
}
// precedence controls insertion order and deduplication
function Component() {
return (
<>
<link rel="stylesheet" href="/base.css" precedence="default" />
<link rel="stylesheet" href="/theme.css" precedence="high" />
<div className="styled">Content</div>
</>
);
}
// React ensures stylesheets load before Suspense boundary reveals
<Suspense fallback={<Skeleton />}>
<link rel="stylesheet" href="/feature.css" precedence="default" />
<FeatureComponent />
</Suspense>
React 19 adds full support for Custom Elements (Web Components).
// Props matching element properties are assigned as properties
// Others are assigned as attributes
<my-element
stringAttr="hello" // Attribute (string)
complexProp={{ foo: 'bar' }} // Property (object)
onCustomEvent={handleEvent} // Property (function)
/>
Client-side: React checks if a property exists on the element instance. If yes, assigns as property; otherwise, as attribute.
Server-side (SSR): Primitive types (string, number) render as attributes. Objects, functions, symbols are omitted from HTML.
// Define custom element
class MyElement extends HTMLElement {
constructor() {
super();
this.data = undefined; // React will assign to this property
}
connectedCallback() {
this.textContent = JSON.stringify(this.data);
}
}
customElements.define('my-element', MyElement);
// Use in React
<my-element data={{ items: [1, 2, 3] }} />
React 19 shows a single error with a diff instead of multiple vague errors:
Uncaught Error: Hydration failed because the server rendered HTML
didn't match the client.
<App>
<span>
+ Client
- Server
React 19 gracefully handles elements inserted by browser extensions or third-party scripts:
<head> and <body> are skipped (no mismatch errors)suppressHydrationWarning for extension-injected content| Removed | Migration |
|---|---|
ReactDOM.render() | createRoot().render() |
ReactDOM.hydrate() | hydrateRoot() |
unmountComponentAtNode() | root.unmount() |
ReactDOM.findDOMNode() | Use refs |
See references/deprecations.md for migration guides.
// useRef requires argument
const ref = useRef<HTMLDivElement>(null); // Required
const ref = useRef(); // Error in React 19
// Ref callbacks must not return values (except cleanup)
<div ref={(node) => { instance = node; }} /> // Correct
<div ref={(node) => (instance = node)} /> // Error - implicit return
// ReactElement props are now unknown (not any)
type Props = ReactElement['props']; // unknown in R19, any in R18
// JSX namespace - import explicitly
import type { JSX } from 'react';
See references/typescript-changes.md for codemods.
# Run all React 19 codemods
npx codemod@latest react/19/migration-recipe
# Individual codemods
npx codemod@latest react/19/replace-reactdom-render
npx codemod@latest react/19/replace-string-ref
npx codemod@latest react/19/replace-act-import
npx codemod@latest react/19/replace-use-form-state
npx codemod@latest react/prop-types-typescript
# TypeScript types
npx types-react-codemod@latest preset-19 ./src
// Named imports (recommended)
import { useState, useEffect, useRef, use } from 'react';
import { createRoot } from 'react-dom/client';
import { useFormStatus } from 'react-dom';
// Default import still works but named preferred
import React from 'react'; // Works but not recommended
// React 19 error handling options
const root = createRoot(container, {
onUncaughtError: (error, errorInfo) => {
// Errors not caught by Error Boundary
console.error('Uncaught:', error, errorInfo.componentStack);
},
onCaughtError: (error, errorInfo) => {
// Errors caught by Error Boundary
reportToAnalytics(error);
},
onRecoverableError: (error, errorInfo) => {
// Errors React recovered from automatically
console.warn('Recovered:', error);
}
});
See references/suspense-streaming.md for Suspense patterns and error boundaries.
Hide/show UI while preserving state (like background tabs):
import { Activity } from 'react';
// State preserved when hidden, Effects cleaned up
<Activity mode={isVisible ? 'visible' : 'hidden'}>
<ExpensiveComponent />
</Activity>
Extract non-reactive logic from Effects without adding dependencies:
import { useEffect, useEffectEvent } from 'react';
function Chat({ roomId, theme }) {
// Reads theme without making it a dependency
const onConnected = useEffectEvent(() => {
showNotification(`Connected!`, theme);
});
useEffect(() => {
const conn = connect(roomId);
conn.on('connected', onConnected);
return () => conn.disconnect();
}, [roomId]); // theme NOT in deps - won't reconnect on theme change
}
See references/react-19-2-features.md for complete 19.1+ and 19.2 features.
| Document | Content |
|---|---|
| paradigm-shifts.md | Mental model changes - how to think in React 19 |
| anti-patterns.md | What to stop doing - outdated patterns |
| react-19-2-features.md | React 19.1+ and 19.2 features (Activity, useEffectEvent) |
| new-hooks.md | Complete API for 19.0 hooks |
| server-components.md | RSC, Server Actions, directives |
| suspense-streaming.md | Suspense, streaming, error handling |
| react-compiler.md |
Weekly Installs
53
Repository
GitHub Stars
1
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex41
opencode41
gemini-cli40
cursor39
claude-code36
github-copilot33
Genkit JS 开发指南:AI 应用构建、错误排查与最佳实践
10,800 周安装
ClickHouse 分析模式与查询优化指南 - 高性能 OLAP 数据库最佳实践
174 周安装
.NET 后端开发专家 | ASP.NET Core API、EF Core、JWT身份验证与企业级解决方案
175 周安装
药物重定位工具:使用ToolUniverse进行系统性药物发现与评估
170 周安装
Drupal 10开发专家指南:PHP 8+、SOLID原则与最佳实践
172 周安装
AI治疗性蛋白质设计工具:RFdiffusion与ProteinMPNN驱动的从头蛋白质开发
171 周安装
Upstash向量数据库技能:快速实现语义搜索与AI应用开发
171 周安装
| Form state | Custom with useState | useActionState hook |
| Optimistic updates | Manual state management | useOptimistic hook |
| Read promises | Not possible in render | use() hook |
| Conditional context | Not possible | use(Context) after conditionals |
| Form pending state | Manual tracking | useFormStatus hook |
| Ref cleanup | Pass null on unmount | Return cleanup function |
| Document metadata | react-helmet or manual | Native <title>, <meta>, <link> |
| Hide/show UI with state | Unmount/remount (state lost) | <Activity> component (19.2+) |
| Non-reactive Effect logic | Add to deps or suppress lint | useEffectEvent hook (19.2+) |
| Custom Elements | Partial support | Full support (props as properties) |
| Hydration errors | Multiple vague errors | Single error with diff |
propTypes| TypeScript or remove |
defaultProps (functions) | ES6 default parameters |
| String refs | Callback refs or useRef |
| Legacy Context | createContext |
React.createFactory | JSX |
react-dom/test-utils | act from 'react' |
| Automatic memoization details |
| deprecations.md | Removed APIs with migration guides |
| typescript-changes.md | Type changes and codemods |