Rules and best practices for React and TypeScript frontend development. Use when writing or reviewing React components, hooks, or JSX — covering purity, rendering rules, hook constraints, and immutability. Based on the official React Rules reference.
This skill provides the authoritative rules for writing correct, idiomatic React code. See the detail files for full explanations and code examples:
| Rule |
|---|
| Allowed |
|---|
| Not allowed |
|---|
| Idempotent render | Same output for same props/state/context | new Date(), Math.random() in render body |
| Side effects | Event handlers, useEffect | Network calls, DOM mutations, subscriptions in render |
| Props | Read-only | props.x = newValue |
| State | setState(newValue) | state.x = newValue |
| Hook arguments | Spread a copy: { ...arg } | Direct mutation of Hook arguments |
| Hook return values | Treat as read-only | Mutating memoized return values |
| Post-JSX mutation | Derive new values before JSX | Mutating an object after passing it to JSX |
try/catch, event handlers, or class componentsMyComponent() directlysrc/pages/ — page-level componentssrc/components/ — shared and feature componentssrc/hooks/ — custom hooks (useHoldings, useTransactions, useStaking, useToast, …)src/context/AppContext.tsx — global React contextsrc/lib/ — pure utility functions (no hooks, no JSX)