# React

> React component patterns — Tailwind styling, size, explicit props, useMemo, useEffect, hooks. Use when writing or reviewing React components, views, or hooks in the frontend. Don't use for non-React JS/TS (use javascript), folder placement (use folder-structure), or general size limits outside components (use code-standards).

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

---


# React

Apply these patterns to React in `frontend/src`. For where a file belongs, invoke `folder-structure` in full. For general size and shape, invoke `code-standards` in full.

## Reference — component rules

### Tailwind first

Style with Tailwind utility classes in JSX. Add a CSS file only for animations or styles Tailwind cannot express cleanly.

### Component size

Keep each component at most 30 lines with one clear responsibility. When it grows, extract cohesive children — split for clarity, not to game the line count.

### Explicit props

Pass only the props the component uses. Treat a full prop spread as an explicit, documented API choice.

```tsx
export function TextField({ value, onChange, placeholder }: TextFieldProps) {
  return <input value={value} onChange={onChange} placeholder={placeholder} />;
}
```

### `useMemo` for real cost

Memoize derived values that are expensive or whose stable identity prevents wasted renders. List every dependency. Skip `useMemo` for trivial expressions.

### Effects for externals

Use `useEffect` to sync with external systems (APIs, subscriptions, timers, DOM). Derive values during render instead of mirroring props/state into effects. Keep each effect small, dependency-complete, and cleaned up.

```tsx
const fullName = `${firstName} ${lastName}`;
```

### Hooks named `use…`

Name custom hooks with a `use` prefix that describes the encapsulated behavior. Call hooks only at the top level of a component or another hook.

### Behavior in hooks

Keep components on composition and presentation. Move state, effects, service calls, and reusable interactions into purpose-specific hooks under `frontend/src/hooks`. HTTP calls stay in `services`.

## Reference — review gate

Before finishing a React change, confirm: Tailwind styling, ≤30-line components, explicit props, justified `useMemo`, external-only effects with cleanup, `use`-prefixed hooks, and non-presentational behavior extracted to hooks.