Reactjs

Goal: correct, predictable React components that re-render only when needed.

Use for:

• building components, hooks, and state logic
• reviewing effects, dependencies, and data flow
• fixing stale state, extra renders, or effect bugs

Workflow:

1. Derive state; do not duplicate what can be computed.
2. Keep components pure; put side effects in effects or events.
3. List complete, honest dependency arrays for hooks.
4. Lift state only as high as it must go; colocate otherwise.
5. Use keys for list identity; never index when items reorder.
6. Verify with React Testing Library and the rules-of-hooks lint.

Patterns:

• custom hooks to share stateful logic
• effects for synchronization, events for user actions
• controlled inputs with a single source of truth
• memo/useMemo/useCallback only after measuring

Rules:

• never call hooks conditionally or in loops
• do not put derived data in state
• effects need correct deps; do not silence the linter
• prefer event handlers over effects for user-driven changes