react-typescript

name	react-typescript
description	TypeScript patterns specific to React components and hooks. Use when typing React props, hooks, event handlers, or component generics in TypeScript. (triggers: **/*.tsx, ReactNode, FC, PropsWithChildren, ComponentProps)

React TypeScript

Priority: P1 (OPERATIONAL)

Type-safe React patterns.

Implementation Guidelines

• Components: Prefer interface/type (Props) over React.FC (which has implicit children). Use JSX.Element or ReactNode as the return type.
• Children: For components that accept children, use PropsWithChildren<T> or explicitly type them as React.ReactNode.
• Events: Always type event handlers using specific React events, such as React.ChangeEvent<HTMLInputElement> or React.FormEvent<HTMLFormElement>.
• Hooks: For useRef, avoid any; use useRef<HTMLDivElement>(null). For useState, use generics for complex types: useState<User | null>(null).
• Native Elements: Use ComponentPropsWithoutRef<'button'> or ComponentPropsWithRef to extend native attributes safely.
• Generics: Implement generic components for reusable UI like lists using <T,>(props: ListProps<T>).
• Discriminated Unions: Use Discriminated Unions for mutually exclusive props (e.g., success vs error states).
• Utility Types: Leverage Omit, Pick, and Partial to transform prop interfaces and avoid redundancy.

Anti-Patterns

• No any: Use unknown.
• No React.FC: Implicit children is deprecated/bad practice.
• No Function: Use (args: T) => void.

References

See references/example.md for typed props, generic components, and hook ref patterns.