React & JSX Rules

reactfrontendjsxtypescript

Modern React conventions: functional components, hooks patterns, performance, accessibility, and testing standards.

Целевые файлы

Файл	Формат
.cursorrules	plaintext
CLAUDE.md	markdown
.github/copilot-instructions.md	markdown

Содержимое

Tech Stack: React 19+, TypeScript, ${styling}. Use functional components exclusively. No class components. Hooks rules: never call hooks conditionally or in loops. Component files: PascalCase (UserProfile.tsx). One component per file. Props: use TypeScript interfaces, destructure in function signature. State: useState for simple, useReducer for complex. Lift state minimally. Effects: avoid useEffect for derived state. Use useMemo instead. Events: name handlers with handle prefix (handleClick, handleSubmit). Keys: use stable, unique IDs. Never use array index as key for dynamic lists. Accessibility: semantic HTML first. aria-* only when HTML is insufficient. Forms: controlled components with validation (react-hook-form or native). Performance: React.memo only with profiling evidence. Virtualize lists > 100 items. Testing: React Testing Library. Test behavior, not implementation. Avoid enzyme. Error boundaries: wrap feature sections, not individual components.