react-client-expert
Installation
SKILL.md
React client expert
Scope: Client components only ("use client" where Next requires it). Do not use async Server Components or server async pages for interactive UI state — that is RSC. Do use client hooks (use, TanStack Query, etc.) for data that drives client UI.
Lint: This repo disables Biome useExhaustiveDependencies. Do not “fix” effects by stuffing the dependency array to silence tooling. Fix the model (derive, ref, extract, query, state machine) per sections below.
Data fetching: not the same as RSC
React supports two different “async component” ideas. Do not conflate them.
| Mechanism | Where | What it is |
|---|---|---|
async function Server Component |
Server only (no "use client") |
RSC: await on server, HTML/stream to client. Out of scope for interactive client logic in this skill. |
use(promise) / use(context) |
Client components (React 19+) | Read a Promise (or context) during render; suspend to nearest <Suspense> until settled. Valid, simple client fetch flow. |
TanStack Query (useQuery, useMutation, …) |
Client | Cache, dedupe, background refetch, invalidation, optimistic updates. Default for non-trivial client data. |
useEffect + fetch + useState |
Client | Legacy pattern — avoid for load-by-key; use Query or use() instead. |