# Reactjs

> Use when: write or review React components with correct hooks, state, effects, and rendering.

- Skill: `kimtth/reactjs` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/reactjs`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/reactjs/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/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