Typescript React Reviewer

by dotneet07fa7eac95c2No license3 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 8 months ago

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.

Instructions onlySoftware Development

AI-generated overview

Reviews TypeScript and React 19 code, flagging anti-patterns, hook misuse, state management issues and type-safety problems.

What it does: Provides a structured code review guide for TypeScript and React 19 applications, organized by priority levels from critical merge blockers to architecture and style notes. It lists detection patterns for useEffect abuse, React 19 hook mistakes, state mutation, TypeScript red flags and state management anti-patterns, each with wrong and correct examples. It also defines a review workflow and points to bundled reference documents covering React 19 patterns, an anti-pattern catalog and a full review checklist.
When to use it: Use it when reviewing React or TypeScript pull requests, evaluating component architecture, or checking hook usage and type safety. It suits requests to identify code smells, assess maintainability, or audit state management choices in a React 19 codebase.
Requirements: No scripts or tooling are required; it is instructions only. It references three bundled markdown documents in the references folder.

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

Source and attribution

Source:dotneet/claude-code-marketplaceinreview-tool/skills/typescript-react-reviewerat commit07fa7ea

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

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

Source and attribution

More from dotneet/claude-code-marketplace

Code Modularization Evaluator

Prompt Improver

Call Cursor Agent

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices