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: