React best practices for components, hooks, state, and performance. Use when writing or reviewing React components, hooks, or when the user mentions React, useState, useEffect, or component patterns. Complements Next.js and Vercel React skills for app-level concerns.
Apply when writing or reviewing React UI code (with or without Next.js). For Next.js-specific rules and RSC, use the next-best-practices and vercel-react-best-practices skills.
'use client' only where needed (interactivity, browser APIs, or client-only libs); keep server components as default where possible (Next.js).ComponentName.tsx for the main export).useState for UI state, useReducer for complex transitions, context for shallow “theme/locale” style data; avoid context for high-frequency updates.useMemo only when the computation is expensive and dependencies are stable.useCallback for callbacks passed to memoized children or effect deps when referential stability matters; avoid wrapping everything.useEffect for sync with external systems (subscriptions, DOM); avoid using it for derived state—compute during render or with useMemo instead.useEffect return (subscriptions, timers, listeners) to avoid leaks.React.memo for components that re-render often with the same props; ensure props are stable (e.g. with useCallback/useMemo where needed).React.lazy and Suspense; keep loading boundaries close to the lazy component.