# React

> React/Next.js best practices for modern, performant applications. Use when this capability is needed.

- Skill: `tomevault-io/react-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/react-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/react-3

---


# React/Next.js Standards

## React 19 Best Practices

- Use Suspense, the `use` hook, and promises as props
- Prefer `use`, `useTransition`, and `startTransition` over `useEffect`
- You probably shouldn't use `useEffect`

## Component Design

- Keep components pure: don't declare constants or functions inside components
- Use React Query for client-side async data fetching
- Don't fetch data in `useEffect`

## Loading & Error States

- Prefer `<Suspense>` and `useSuspenseQuery` over React Query's `isLoading`
- Use `errorBoundary` with retry button

## Cache Management

- Don't use magic strings for cache tags; use an enum/factory
- Use enum for React Query cache strings

## Avoid

- Magic numbers/strings
- Data fetching in useEffect
- Constants inside component bodies
- isLoading patterns when Suspense works

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/x-tri) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->