CodeRacer React TypeScript Best Practices
This skill enforces strict coding standards for React/TypeScript projects with emphasis on clean code, naming conventions, constant management, and performance optimization.
Instructions
When working on React/TypeScript codebases, follow these critical rules:
1. Language & Framework Standards
Use TypeScript for all code with strict mode enabledUse React 18+ with functional components and hooks onlyUse Next.js for routing and server-side renderingUse Tailwind CSS for stylingUse Zustand for state management2. Code Style - CRITICAL RULES
**Function Size & Naming:**
Keep all functions under 30 lines maximumIf a function exceeds 30 lines, break it into smaller, focused functionsUse descriptive, action-oriented function names (e.g., `validateUserInput`, `handleSubmit`, `fetchUserData`)Use camelCase for functions and variablesUse PascalCase for components and typesUse kebab-case for file names**Variable Naming Standards:**
Use clear, descriptive names that explain purposeAVOID generic names like `data`, `result`, `temp`, `val`, `obj`Boolean variables: Use `is`, `has`, `can`, `should` prefixes (e.g., `isLoading`, `hasPermission`)Counters: Use descriptive names (e.g., `retryCount`, `attemptNumber`)IDs: Always include type (e.g., `userID`, `matchID`, `sessionID`)Collections: Use plural forms (e.g., `users`, `matches`, `sessions`)Even temporary variables need meaningful names (e.g., `currentUser`, `nextMatch`)3. Constants & Magic Values - CRITICAL RULES
**NO MAGIC NUMBERS OR STRINGS:**
Define constants for ALL numeric values except obvious cases (0, 1, array.length, loop counters)Define constants for ALL string literalsUse UPPER_CASE naming for constants (e.g., `MAX_RETRY_ATTEMPTS`, `DEFAULT_TIMEOUT`)Group related constants in const blocks or objectsMove configuration values to config files**Examples:**
Bad:
```typescript
if (retryCount > 3) {
throw new Error('failed');
}
```
Good:
```typescript
const MAX_RETRY_ATTEMPTS = 3;
const ERROR_MESSAGE_FAILED = 'failed';
if (retryCount > MAX_RETRY_ATTEMPTS) {
throw new Error(ERROR_MESSAGE_FAILED);
}
```
Grouped constants:
```typescript
const API_CONFIG = {
MAX_RETRY_ATTEMPTS: 3,
DEFAULT_TIMEOUT: 30000,
BASE_URL: 'https://api.example.com',
} as const;
```
4. Component Design Principles
**Single Responsibility**: Each component does ONE thing well**Clear Purpose**: Component name clearly indicates what it renders**Small Size**: Break large components into smaller, focused components**Descriptive Props**: Use meaningful prop names with TypeScript interfaces**Self-Documenting**: Code should be readable without comments5. React Patterns
Use functional components with hooks onlyDefine TypeScript interfaces for all propsImplement proper error boundariesUse React.memo for performance optimization when neededExtract reusable logic into custom hooksProper cleanup in useEffect hooks with return functions6. State Management
Use Zustand for global stateKeep component state local when possibleUse proper TypeScript types for all stateImplement immutable state updates7. Styling
Use Tailwind CSS utility classesCreate reusable component variantsUse CSS modules only for complex stylesFollow mobile-first responsive design8. API Integration
Use axios for HTTP requestsImplement proper error handling for all API callsDefine TypeScript interfaces for all API responsesHandle loading and error states properlyUse custom hooks for WebSocket connectionsImplement proper WebSocket cleanup in useEffectUse TypeScript for message types9. Performance Optimization
Use React.lazy for code splittingImplement proper memoization with React.memo, useMemo, useCallbackOptimize re-renders by minimizing dependenciesUse proper dependency arrays in useEffectAvoid unnecessary re-renders and memory leaks10. Code Quality & Linting - MANDATORY
Before committing any code, ensure:
ESLint passes with ZERO errors or warningsPrettier formatting is appliedImport ordering: React → Next.js → Third-party → Local componentsTypeScript strict mode compliance (no `any` types)NO console.log statements in production codeNO unused variables or importsAll React Hooks rules followed with correct dependency arraysProper ARIA attributes and semantic HTML for accessibility11. Security
Validate all user inputsSanitize data before renderingUse proper authentication patternsImplement proper CORS handling12. Project Structure
Organize components by featureUse barrel exports (index.ts files)Keep components small and focusedSeparate business logic from UI componentsCode Review Checklist
Before approving any code, verify:
[ ] Function is under 30 lines[ ] Function name clearly describes its purpose[ ] All variables have descriptive names[ ] No generic variable names (data, result, temp, etc.)[ ] Boolean variables use proper prefixes (is, has, can, should)[ ] NO magic numbers - all numeric values are named constants[ ] NO magic strings - all string literals are named constants[ ] Constants are grouped logically in const blocks/objects[ ] Component props are properly typed with interfaces[ ] Error handling is implemented for all async operations[ ] Code is readable and self-documenting[ ] Proper cleanup in useEffect hooks[ ] No unnecessary re-renders[ ] ESLint passes with no errors or warnings[ ] No console.log statements in production code[ ] No unused variables or imports[ ] TypeScript strict mode compliance[ ] Proper import ordering[ ] Accessibility attributes included[ ] Performance optimizations appliedExample Usage
When asked to create a component or refactor code:
1. Check function length - break into smaller functions if over 30 lines
2. Replace all magic numbers/strings with named constants
3. Ensure all variable names are descriptive and follow conventions
4. Apply proper TypeScript types and interfaces
5. Implement error handling and loading states
6. Add performance optimizations (memoization where needed)
7. Run ESLint and fix all warnings
8. Verify accessibility and semantic HTML
9. Review against the checklist before finalizing