react-typescript

name	react-typescript
description	Type React components and hooks with TypeScript patterns. Use when typing React props, hooks, event handlers, or component generics in TypeScript.
metadata	{"triggers":{"files":["**/*.tsx"],"keywords":["ReactNode","FC","PropsWithChildren","ComponentProps","react typescript","tsx types","props interface","generic component","useState type","useRef type","typed hooks"]}}

React TypeScript

Priority: P1 (HIGH)

Implementation Guidelines

• Components: Prefer interface/type (Props) over React.FC (which implicit children). Use JSX.Element or ReactNode as 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 or to extend native attributes safely.