# React

> Use when building React 18+ (Vite, TypeScript) components, hooks, error boundaries, and layout elements.

- Skill: `sahilkhan30/react` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sahilkhan30/react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sahilkhan30/react/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: SahilKhan30 (https://skillmd.com/u/sahilkhan30)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/sahilkhan30/react

---


# React 18+ & Component Architecture Skill

## Purpose
Standardize React component composition, state isolation, hooks, and UI state boundary handling.

---

## 1. Core Principles

### MANDATORY
- Use TypeScript functional components with explicit prop interface types.
- Provide explicit UI state boundaries for:
  1. **Loading State**: Visual spinner or skeletonloader.
  2. **Error State**: User-friendly error alert with retry trigger.
  3. **Empty State**: Clear empty message when datasets contain zero items.
- Wrap feature trees in React Error Boundaries to catch runtime rendering errors.

### MUST NOT
- Fetch data directly inside `useEffect` with raw `fetch()` or Axios (use RTK Query).
- Store un-paginated large API responses in component local state.