typescript react
via PatrickJS/awesome-cursorrules
TypeScript React best practices with functional components, hooks, and strict type safety.
What is typescript react?
Enforces TypeScript React conventions including functional components, proper typing with interfaces, and organized folder structure. Use this rule when building React applications with TypeScript to ensure consistent patterns around hooks, component composition, and type safety.
- Prefer functional components with React.FC and proper prop interfaces
- Utilize useState, useEffect hooks, and custom hooks for state and side effects
- Enforce strict TypeScript mode and type inference
- Organize code with standard folder structure (components, hooks, pages, types, utils)
- Implement performance optimization with React.memo and code-splitting via React.lazy/Suspense
- Apply error boundaries and ESLint with TypeScript/React plugins for code quality
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// TypeScript React .cursorrules
// Prefer functional components
const preferFunctionalComponents = true;
// TypeScript React best practices
const typescriptReactBestPractices = [ "Use React.FC for functional components with props", "Utilize useState and useEffect hooks for state and side effects", "Implement proper TypeScript interfaces for props and state", "Use React.memo for performance optimization when needed", "Implement custom hooks for reusable logic", "Utilize TypeScript's strict mode", ];
// Folder structure
const folderStructure = src/ components/ hooks/ pages/ types/ utils/ App.tsx index.tsx;
// Additional instructions
const additionalInstructions = `
- Use .tsx extension for files with JSX
- Implement strict TypeScript checks
- Utilize React.lazy and Suspense for code-splitting
- Use type inference where possible
- Implement error boundaries for robust error handling
- Follow React and TypeScript best practices and naming conventions
- Use ESLint with TypeScript and React plugins for code quality `;
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.