---
name: reactjs
description: "Use when: write or review React components with correct hooks, state, effects, and rendering."
---

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