Typescript React Reviewer

dotneet/claude-code-marketplace/review-tool/skills/typescript-react-reviewer

作者 dotneet07fa7eac95c2無授權條款3 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫8 個月前更新

Expert code reviewer for TypeScript + React 19 applications. Use when reviewing React code, identifying anti-patterns, evaluating state management, or assessing code maintainability. Triggers: code review requests, PR reviews, React architecture evaluation, identifying code smells, TypeScript type safety checks, useEffect abuse detection, state management review.

僅含說明Software Development

AI 產生的概覽

審查 TypeScript 與 React 19 程式碼，指出反模式、Hook 誤用、狀態管理問題與型別安全問題。

功能: 提供針對 TypeScript 與 React 19 應用程式的結構化程式碼審查指南，依優先層級編排，從阻擋合併的嚴重問題到架構與風格建議。內容列出 useEffect 濫用、React 19 Hook 錯誤、狀態直接變更、TypeScript 危險訊號以及狀態管理反模式的偵測模式，並附上錯誤與正確寫法範例。它也定義審查流程，並指向隨附的參考文件，涵蓋 React 19 模式、反模式目錄與完整審查清單。
適用情境: 適用於審查 React 或 TypeScript 的拉取請求、評估元件架構，或檢查 Hook 用法與型別安全。也適合找出程式碼異味、評估可維護性，或審視 React 19 程式庫中的狀態管理做法。
執行需求: 不需要任何指令碼或工具，僅為說明性內容。它引用了 references 資料夾中的三份隨附 Markdown 文件。

TypeScript + React 19 Code Review Expert

Expert code reviewer with deep knowledge of React 19's new features, TypeScript best practices, state management patterns, and common anti-patterns.

Review Priority Levels

🚫 Critical (Block Merge)

These issues cause bugs, memory leaks, or architectural problems:

Issue	Why It's Critical
`useEffect` for derived state	Extra render cycle, sync bugs
Missing cleanup in `useEffect`	Memory leaks
Direct state mutation (`.push()`, `.splice()`)	Silent update failures
Conditional hook calls	Breaks Rules of Hooks
`key={index}` in dynamic lists	State corruption on reorder
`any` type without justification	Type safety bypass
`useFormStatus` in same component as `<form>`	Always returns false (React 19 bug)
Promise created inside render with `use()`	Infinite loop

⚠️ High Priority

Issue	Impact
Incomplete dependency arrays	Stale closures, missing updates
Props typed as `any`	Runtime errors
Unjustified `useMemo`/`useCallback`	Unnecessary complexity
Missing Error Boundaries	Poor error UX
Controlled input initialized with `undefined`	React warning

📝 Architecture/Style

Issue	Recommendation
Component > 300 lines	Split into smaller components
Prop drilling > 2-3 levels	Use composition or context
State far from usage	Colocate state
Custom hooks without `use` prefix	Follow naming convention

Quick Detection Patterns

useEffect Abuse (Most Common Anti-Pattern)

typescript

// ❌ WRONG: Derived state in useEffectconst [firstName, setFirstName] = useState('');const [fullName, setFullName] = useState('');useEffect(() => {  setFullName(firstName + ' ' + lastName);}, [firstName, lastName]);
// ✅ CORRECT: Compute during renderconst fullName = firstName + ' ' + lastName;

// ❌ WRONG: Derived state in useEffectconst [firstName, setFirstName] = useState('');const [fullName, setFullName] = useState('');useEffect(() => {  setFullName(firstName + ' ' + lastName);}, [firstName, lastName]);
// ✅ CORRECT: Compute during renderconst fullName = firstName + ' ' + lastName;

typescript

// ❌ WRONG: Event logic in useEffectuseEffect(() => {  if (product.isInCart) showNotification('Added!');}, [product]);
// ✅ CORRECT: Logic in event handlerfunction handleAddToCart() {  addToCart(product);  showNotification('Added!');}

// ❌ WRONG: Event logic in useEffectuseEffect(() => {  if (product.isInCart) showNotification('Added!');}, [product]);
// ✅ CORRECT: Logic in event handlerfunction handleAddToCart() {  addToCart(product);  showNotification('Added!');}

React 19 Hook Mistakes

typescript

// ❌ WRONG: useFormStatus in form component (always returns false)function Form() {  const { pending } = useFormStatus();  return <form action={submit}><button disabled={pending}>Send</button></form>;}
// ✅ CORRECT: useFormStatus in child componentfunction SubmitButton() {  const { pending } = useFormStatus();  return <button type="submit" disabled={pending}>Send</button>;}function Form() {  return <form action={submit}><SubmitButton /></form>;}

// ❌ WRONG: useFormStatus in form component (always returns false)function Form() {  const { pending } = useFormStatus();  return <form action={submit}><button disabled={pending}>Send</button></form>;}
// ✅ CORRECT: useFormStatus in child componentfunction SubmitButton() {  const { pending } = useFormStatus();  return <button type="submit" disabled={pending}>Send</button>;}function Form() {  return <form action={submit}><SubmitButton /></form>;}

typescript

// ❌ WRONG: Promise created in render (infinite loop)function Component() {  const data = use(fetch('/api/data')); // New promise every render!}
// ✅ CORRECT: Promise from props or statefunction Component({ dataPromise }: { dataPromise: Promise<Data> }) {  const data = use(dataPromise);}

// ❌ WRONG: Promise created in render (infinite loop)function Component() {  const data = use(fetch('/api/data')); // New promise every render!}
// ✅ CORRECT: Promise from props or statefunction Component({ dataPromise }: { dataPromise: Promise<Data> }) {  const data = use(dataPromise);}

State Mutation Detection

typescript

// ❌ WRONG: Mutations (no re-render)items.push(newItem);setItems(items);
arr[i] = newValue;setArr(arr);
// ✅ CORRECT: Immutable updatessetItems([...items, newItem]);setArr(arr.map((x, idx) => idx === i ? newValue : x));

// ❌ WRONG: Mutations (no re-render)items.push(newItem);setItems(items);
arr[i] = newValue;setArr(arr);
// ✅ CORRECT: Immutable updatessetItems([...items, newItem]);setArr(arr.map((x, idx) => idx === i ? newValue : x));

TypeScript Red Flags

typescript

// ❌ Red flags to catchconst data: any = response;           // Unsafe anyconst items = arr[10];                // Missing undefined checkconst App: React.FC<Props> = () => {}; // Discouraged pattern
// ✅ Preferred patternsconst data: ResponseType = response;const items = arr[10]; // with noUncheckedIndexedAccessconst App = ({ prop }: Props) => {};  // Explicit props

// ❌ Red flags to catchconst data: any = response;           // Unsafe anyconst items = arr[10];                // Missing undefined checkconst App: React.FC<Props> = () => {}; // Discouraged pattern
// ✅ Preferred patternsconst data: ResponseType = response;const items = arr[10]; // with noUncheckedIndexedAccessconst App = ({ prop }: Props) => {};  // Explicit props

Review Workflow

Scan for critical issues first - Check for the patterns in "Critical (Block Merge)" section
Check React 19 usage - See react19-patterns.md [blocked] for new API patterns
Evaluate state management - Is state colocated? Server state vs client state separation?
Assess TypeScript safety - Generic components, discriminated unions, strict config
Review for maintainability - Component size, hook design, folder structure

Reference Documents

For detailed patterns and examples:

react19-patterns.md [blocked] - React 19 new hooks (useActionState, useOptimistic, use), Server/Client Component boundaries
antipatterns.md [blocked] - Comprehensive anti-pattern catalog with fixes
checklist.md [blocked] - Full code review checklist for thorough reviews

State Management Quick Guide

Data Type	Solution
Server/async data	TanStack Query (never copy to local state)
Simple global UI state	Zustand (~1KB, no Provider)
Fine-grained derived state	Jotai (~2.4KB)
Component-local state	useState/useReducer
Form state	React 19 useActionState

TanStack Query Anti-Pattern

typescript

// ❌ NEVER copy server data to local stateconst { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos });const [todos, setTodos] = useState([]);useEffect(() => setTodos(data), [data]);
// ✅ Query IS the source of truthconst { data: todos } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos });

// ❌ NEVER copy server data to local stateconst { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos });const [todos, setTodos] = useState([]);useEffect(() => setTodos(data), [data]);
// ✅ Query IS the source of truthconst { data: todos } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos });

TypeScript Config Recommendations

json

{  "compilerOptions": {    "strict": true,    "noUncheckedIndexedAccess": true,    "noImplicitReturns": true,    "exactOptionalPropertyTypes": true  }}

{  "compilerOptions": {    "strict": true,    "noUncheckedIndexedAccess": true,    "noImplicitReturns": true,    "exactOptionalPropertyTypes": true  }}

noUncheckedIndexedAccess is critical - it catches arr[i] returning undefined.

Immediate Red Flags

When reviewing, flag these immediately:

Pattern	Problem	Fix
`eslint-disable react-hooks/exhaustive-deps`	Hides stale closure bugs	Refactor logic
Component defined inside component	Remounts every render	Move outside
`useState(undefined)` for inputs	Uncontrolled warning	Use empty string
`React.FC` with generics	Generic inference breaks	Use explicit props
Barrel files (`index.ts`) in app code	Bundle bloat, circular deps	Direct imports

來源與署名

來源：dotneet/claude-code-marketplace位於review-tool/skills/typescript-react-reviewer提交07fa7ea

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Typescript React Reviewer

TypeScript + React 19 Code Review Expert

Review Priority Levels

🚫 Critical (Block Merge)

⚠️ High Priority

📝 Architecture/Style

Quick Detection Patterns

useEffect Abuse (Most Common Anti-Pattern)

React 19 Hook Mistakes

State Mutation Detection

TypeScript Red Flags

Review Workflow

Reference Documents

State Management Quick Guide

TanStack Query Anti-Pattern

TypeScript Config Recommendations

Immediate Red Flags

來源與署名

更多來自 dotneet/claude-code-marketplace 的技能

Code Modularization Evaluator

Prompt Improver

Call Cursor Agent

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices