react-19 by prowler-cloud/prowler
npx skills add https://github.com/prowler-cloud/prowler --skill react-19// ✅ React Compiler 自动处理优化
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} />;
}
// ❌ 禁止:手动记忆化
const filtered = useMemo(() => items.filter(x => x.active), [items]);
const handleClick = useCallback((id) => console.log(id), []);
// ✅ 始终:命名导入
import { useState, useEffect, useRef } from "react";
// ❌ 禁止
import React from "react";
import * as React from "react";
// ✅ 服务端组件(默认)- 无需指令
export default async function Page() {
const data = await fetchData();
return <ClientComponent data={data} />;
}
// ✅ 客户端组件 - 仅在需要时使用
"use client";
export function Interactive() {
const [state, setState] = useState(false);
return <button onClick={() => setState(!state)}>切换</button>;
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
import { use } from "react";
// 读取 Promise(会暂停直到解析完成)
function Comments({ promise }) {
const comments = use(promise);
return comments.map(c => <div key={c.id}>{c.text}</div>);
}
// 条件性上下文(使用 useContext 无法实现!)
function Theme({ showTheme }) {
if (showTheme) {
const theme = use(ThemeContext);
return <div style={{ color: theme.primary }}>主题化</div>;
}
return <div>普通</div>;
}
"use server";
async function submitForm(formData: FormData) {
await saveToDatabase(formData);
revalidatePath("/");
}
// 带 pending 状态
import { useActionState } from "react";
function Form() {
const [state, action, isPending] = useActionState(submitForm, null);
return (
<form action={action}>
<button disabled={isPending}>
{isPending ? "保存中..." : "保存"}
</button>
</form>
);
}
// ✅ React 19:ref 只是一个 prop
function Input({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
// ❌ 旧方式(现已不必要)
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);
每周安装量
174
代码仓库
GitHub 星标数
13.4K
首次出现
2026年1月20日
安全审计
安装于
opencode155
codex150
gemini-cli148
github-copilot142
claude-code138
cursor137
// ✅ React Compiler handles optimization 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} />;
}
// ❌ NEVER: Manual memoization
const filtered = useMemo(() => items.filter(x => x.active), [items]);
const handleClick = useCallback((id) => console.log(id), []);
// ✅ ALWAYS: Named imports
import { useState, useEffect, useRef } from "react";
// ❌ NEVER
import React from "react";
import * as React from "react";
// ✅ Server Component (default) - no directive
export default async function Page() {
const data = await fetchData();
return <ClientComponent data={data} />;
}
// ✅ Client Component - only when needed
"use client";
export function Interactive() {
const [state, setState] = useState(false);
return <button onClick={() => setState(!state)}>Toggle</button>;
}
import { use } from "react";
// Read promises (suspends until resolved)
function Comments({ promise }) {
const comments = use(promise);
return comments.map(c => <div key={c.id}>{c.text}</div>);
}
// Conditional context (not possible with useContext!)
function Theme({ showTheme }) {
if (showTheme) {
const theme = use(ThemeContext);
return <div style={{ color: theme.primary }}>Themed</div>;
}
return <div>Plain</div>;
}
"use server";
async function submitForm(formData: FormData) {
await saveToDatabase(formData);
revalidatePath("/");
}
// With pending state
import { useActionState } from "react";
function Form() {
const [state, action, isPending] = useActionState(submitForm, null);
return (
<form action={action}>
<button disabled={isPending}>
{isPending ? "Saving..." : "Save"}
</button>
</form>
);
}
// ✅ React 19: ref is just a prop
function Input({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
// ❌ Old way (unnecessary now)
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);
Weekly Installs
174
Repository
GitHub Stars
13.4K
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode155
codex150
gemini-cli148
github-copilot142
claude-code138
cursor137
UI组件模式实战指南:构建可复用React组件库与设计系统
10,700 周安装