react-typescriptlisted
Install: claude install-skill tenequm/skills
# React TypeScript
Patterns for building type-safe React 19.2 applications with TypeScript 5.9. React Compiler handles memoization automatically - write plain components, let the tooling optimize.
## Critical Rules
### No forwardRef - ref Is a Prop Now
```tsx
// WRONG - deprecated pattern
const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
<input ref={ref} {...props} />
))
// CORRECT - React 19: ref is a regular prop
function Input({ ref, ...props }: React.ComponentProps<"input">) {
return <input ref={ref} {...props} />
}
```
### No Manual Memoization with React Compiler
```tsx
// WRONG - unnecessary with React Compiler
const MemoizedList = memo(function List({ items }: { items: Item[] }) {
const sorted = useMemo(() => items.toSorted(compare), [items])
const handleClick = useCallback((id: string) => onSelect(id), [onSelect])
return sorted.map(item => <Row key={item.id} onClick={() => handleClick(item.id)} />)
})
// CORRECT - React Compiler auto-memoizes all of this
function List({ items, onSelect }: { items: Item[]; onSelect: (id: string) => void }) {
const sorted = items.toSorted(compare)
return sorted.map(item => <Row key={item.id} onClick={() => onSelect(item.id)} />)
}
```
### Use `React.ComponentProps<>` for Element Props
```tsx
// WRONG - manual HTML attribute typing
interface ButtonProps {
onClick?: (e: MouseEvent<HTMLButtonElement>) => void
disabled?: boolean
children: React.ReactNode
className?: string
}
// CORREC