TypeScript + React 17 Code Review Expert

Expert code reviewer with deep knowledge of React 17, Redux, Redux-Saga, Ant Design 4, and TypeScript best practices.

Review Priority Levels

🚫 Critical (Block Merge)

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

⚠️ High Priority

📝 Architecture/Style

Quick Detection Patterns

useEffect Abuse (Most Common Anti-Pattern)

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

// ✅ CORRECT: Compute during render
const fullName = firstName + ' ' + lastName;

// ❌ WRONG: Event logic in useEffect
useEffect(() => {
  if (product.isInCart) showNotification('Added!');
}, [product]);

// ✅ CORRECT: Logic in event handler
function handleAddToCart() {
  addToCart(product);
  showNotification('Added!');
}

Redux + Saga Patterns

// ❌ WRONG: Missing error handling in Saga (Critical)
function* fetchDataSaga(action) {
  const data = yield call(api.fetchData, action.payload);
  yield put(actions.fetchSuccess(data));
}

// ✅ CORRECT (Mandatory): Try-catch in Saga
function* fetchDataSaga(action) {
  try {
    const data = yield call(api.fetchData, action.payload);
    yield put(actions.fetchSuccess(data));
  } catch (error) {
    yield put(actions.fetchFailure(error));
  }
}

TypeScript Red Flags

// ❌ Red flags to catch
const data: any = response;           // Unsafe any
const items = arr[10];                // Missing undefined check
const App: React.FC<Props> = () => {}; // Discouraged pattern

// ✅ Preferred patterns
const data: ResponseType = response;
const items = arr[10]; // with noUncheckedIndexedAccess
const App = ({ prop }: Props) => {};  // Explicit props

Review Workflow

1. Scan for critical issues first – Check for the patterns in “Critical (Block Merge)” section
2. Evaluate Redux/Saga usage – Check for proper effect usage and error handling in Sagas
3. Assess ahooks usage – Check if ahooks (useMount, useUnmount, etc.) are used for readability
4. Assess TypeScript safety – Generic components, discriminated unions, strict config
5. Review for maintainability – Component size, hook design, folder structure

Reference Documents

For detailed patterns and examples:

• redux-saga-patterns.md – Best practices for Redux-Saga effects and flows
• antd-v4-patterns.md – Ant Design 4 component usage and Form/Table best practices
• electron-patterns.md – Electron IPC, cleanup, and native integration
• antipatterns.md – Comprehensive anti-pattern catalog with fixes
• checklist.md – Full code review checklist for thorough reviews

State Management Quick Guide

Specialized Review Rules

1. Localization (i18n)

Avoid hardcoded Chinese/English strings in JSX.

• Wrong: <span>确定</span>
• Correct: <span>{util.locale('common_ok')}</span>

2. Electron Cleanup

Always verify that IPC listeners and DOM event listeners have corresponding cleanup logic.

Redux Mutation Anti-Pattern

// ❌ NEVER mutate state in Reducers
case 'ADD_TODO':
  state.todos.push(action.payload);
  return state;

// ✅ Redux Toolkit or Immutable updates
case 'ADD_TODO':
  return { ...state, todos: [...state.todos, action.payload] };

TypeScript Config Recommendations

{
  "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: