Menu
React component patterns, hooks, state management, and performance best practices. Use when building or reviewing React components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Git branching strategy, commit messages, PR workflow, conflict resolution. Use when setting up a branching strategy, writing commit messages, creating pull requests, or resolving merge conflicts.
Code review checklist, what to look for, how to give feedback, PR review flow. Use when reviewing a pull request, or when preparing code for review.
How to create new skills for this HQ — format, frontmatter, content structure. Use when you need to add a new skill to this repository, or when reviewing whether an existing skill is well-formed.
Structured brainstorming techniques, idea generation, trade-off analysis. Use when exploring design options, choosing between architectural approaches, generating feature ideas, or making technology decisions.
Generating Excel files with xlsx/exceljs in Node.js. Use when generating .xlsx reports, data exports, dashboards, or spreadsheets from database data.
Generating PowerPoint presentations with pptxgenjs in Node.js. Use when creating automated presentations, slide decks, pitch decks, or reports in .pptx format from data.
| name | react-best-practices |
| description | React component patterns, hooks, state management, and performance best practices. Use when building or reviewing React components. |
// ✅ Correct
interface UserCardProps {
user: User
onSelect: (id: string) => void
}
export const UserCard = ({ user, onSelect }: UserCardProps) => {
return (
<button onClick={() => onSelect(user.id)} className="...">
{user.name}
</button>
)
}
// ❌ Never use class components
class UserCard extends React.Component {}
// ✅ Use composition
export const Layout = ({ children }: { children: React.ReactNode }) => (
<div className="layout">{children}</div>
)
// ✅ Use context for deep data
const ThemeContext = createContext<Theme | null>(null)
export const useTheme = () => {
const theme = useContext(ThemeContext)
if (!theme) throw new Error('useTheme must be used within ThemeProvider')
return theme
}
// ✅ Extract reusable logic into hooks
const useLocalStorage = <T>(key: string, initial: T) => {
const [value, setValue] = useState<T>(() => {
try {
const item = localStorage.getItem(key)
return item ? JSON.parse(item) : initial
} catch {
return initial
}
})
const set = (val: T) => {
setValue(val)
localStorage.setItem(key, JSON.stringify(val))
}
return [value, set] as const
}
// ✅ Correct — explicit dependencies
useEffect(() => {
fetchUser(userId)
}, [userId])
// ✅ Cleanup when needed
useEffect(() => {
const sub = subscribe(channel)
return () => sub.unsubscribe()
}, [channel])
// ❌ Never ignore the dependency array
useEffect(() => {
fetchUser(userId)
}) // runs on every render
// ✅ Memoize expensive computations
const sorted = useMemo(
() => items.sort((a, b) => a.name.localeCompare(b.name)),
[items]
)
// ✅ Stable callback references
const handleClick = useCallback((id: string) => {
onSelect(id)
}, [onSelect])
// ✅ Prevent unnecessary re-renders
export const HeavyList = memo(({ items }: { items: Item[] }) => (
<ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
))
// ✅ Lazy load heavy components
const Dashboard = lazy(() => import('./Dashboard'))
export const App = () => (
<Suspense fallback={<Spinner />}>
<Dashboard />
</Suspense>
)
// ✅ Error boundaries for UI errors
export class ErrorBoundary extends React.Component<
{ children: ReactNode; fallback: ReactNode },
{ hasError: boolean }
> {
state = { hasError: false }
static getDerivedStateFromError() { return { hasError: true } }
render() {
return this.state.hasError ? this.props.fallback : this.props.children
}
}
any types on propskey props in listsuseEffectuseEffect for derived state (use useMemo)