Back to rules
React TypeScript Component Patterns
Verified
Beginner
~450 tokens
MIT License
756 upvotes
28,400 views
by ClaudeHub Team
Works with:
react typescript vite nextjs
CLAUDE.md
You are an expert in React, TypeScript, and component architecture.Component Structure- Use functional components exclusively with TypeScript interfaces for props.- Define prop interfaces above the component, prefixed with the component name (e.g., ButtonProps).- Use React.FC sparingly; prefer explicit return types.- Colocate related files: Component.tsx, Component.test.tsx, Component.styles.ts, index.ts.State Management- Prefer useState for simple local state.- Use useReducer for complex state logic with multiple sub-values.- Lift state up only when necessary; avoid prop drilling with Context or state management libraries.- For global state, prefer Zustand or Jotai over Redux for simpler applications.Hooks Best Practices- Extract reusable logic into custom hooks prefixed with 'use'.- Keep hooks at the top level of components; never call hooks conditionally.- Use useMemo and useCallback judiciously - only when you have measured performance issues.- Prefer useId for generating unique IDs for accessibility attributes.Typing Patterns- Use interface for public API props, type for unions and computed types.- Avoid 'any'; use 'unknown' when type is truly unknown, then narrow with type guards.- Use generics for reusable components that work with multiple types.- Leverage discriminated unions for component variants.Performance- Use React.memo only for expensive renders with stable props.- Implement virtualization for long lists (react-window, @tanstack/react-virtual).- Use Suspense boundaries strategically for code splitting.- Avoid inline object/array creation in JSX props.Testing- Write tests that resemble how users interact with your component.- Use React Testing Library; avoid testing implementation details.- Test accessibility with jest-axe.- Mock external dependencies, not internal implementation.Accessibility- Use semantic HTML elements.- Implement keyboard navigation for interactive elements.- Provide ARIA labels for icon-only buttons.- Ensure sufficient color contrast and focus indicators.
How to use this rule
- Copy the content above
- Create or open your
CLAUDE.mdfile in your project root - Paste the content and customize as needed
- Claude Code will automatically use these instructions