react-best-practice.md

paths
**/*.{ts,tsx}

React Dev Principles

1. Purity & Architecture

• Render must be pure/deterministic: same inputs → same JSX.
• Must be StrictMode-safe: no side effects in render (no mutations/API calls).
• Keep render logic separate from event handlers.

2. State: Single Source + Minimal

• Avoid redundant state; derive during render when possible (e.g., fullName).
• Don’t mirror props into state unless you intentionally ignore future prop updates.
• Group related state to avoid impossible combinations.
• Use key to reset state across distinct entities; don’t useEffect-reset for identity changes.

3. Effects = Escape Hatch

• useEffect is for syncing with external systems, not internal calculations/transformations.
• Dependencies must be honest: anything referenced inside goes in the deps array.
• If it can be done in render or an event handler, don’t use an effect.

4. Async & Races

• useEffect fetching must guard races via cleanup (AbortController or ignore-flag).
• Use functional updates when next state depends on previous (setX(prev => ...)).
• Prefer React Query / SWR over manual effect-fetching for caching/deduping/race handling.

5. Hooks & Extraction

• Custom hooks expose intent (what), hide implementation (how).
• Use useRef for persistent non-reactive values (timers, previous values).
• Use useCallback/useMemo mainly for stable identity across deps/children.

6. Quality Rules

• Props/state are immutable; update via copies (spread / immut helpers).
• Use guard clauses / early returns to reduce nesting and clarify render flow.