React

Critical rules for React development.

Hooks

• •Hooks first, top-level only (no loops/conditions/nested fns)
• •Order: hooks → derived values → handlers → JSX return
• •Group by concern: state/store → data/query → memo → effects
• •Never select entire store (e.g. Zustand); always use selectors + shallow

State & Data

• •State minimal, normalized; derive instead of duplicate
• •Prefer local state; global only for truly cross-cutting data
• •Use query libraries (React Query/SWR) for server data; never raw fetch in components
• •Query cache = source of truth; don't mirror to local state

Props & Composition

• •Minimize props; prefer whole objects over many primitives
• •No prop drilling; use composition or context
• •Access global stores via hooks, not props

Effects & Render

• •Avoid useEffect when possible; use only for external sync
• •All dependencies listed; restructure instead of silencing lints
• •Cleanup always (timers, subscriptions)
• •Render pure: no side-effects, no mutation
• •Stable keys in lists (real IDs, not array index)
• •Final conditional render (if (!data) return null;) just before JSX, never between hooks

Performance

• •No premature optimization; memoize only for real perf issues
• •Avoid inline objects/functions in JSX that cause re-renders