← スキル一覧に戻る

react-19
by tirtza-weinfeld
⭐ 0🍴 0📅 2026年1月25日
SKILL.md
name: react-19 description: React 19.3+ patterns. Use for forms, async data, pre-rendering, transitions, refs, context, metadata.
React 19.3+
Avoid → Use
useState+onChangefor forms →useActionState→examples/form-action.tsxawaitin server components → pass promise,use()in client →examples/use-server-promise.tsxforwardRef→refas propuseCallback/useMemo→ compiler handles ituseContext→use(Context)Context.Provider→<Context value={}>- Manual state reset on prop change →
keyprop
Patterns
- Forms:
useActionState(fn, init)+useOptimistic+useFormStatus→examples/form-action.tsx - Pre-rendering:
<Activity mode="hidden">→examples/activity-prerender.tsx - Effect events:
useEffectEvent()for non-reactive logic in effects →examples/effect-event.tsx - Async data: pass promise from server, unwrap with
use()→examples/use-server-promise.tsx - ViewTransition: wrap elements, use
startTransition()+addTransitionType()→examples/view-transition.tsx - Mutations outside forms:
useTransition+ Server Action →examples/server-action-mutation.tsx - Suspense:
<Suspense fallback={...}>wraps async components - Deferred value:
useDeferredValue(value, initialValue) - Request memoization:
cache(async fn)withcacheSignal() - Server Action:
"use server"+revalidatePath()/revalidateTag() - Metadata:
<title>,<meta>,<link>hoisted to<head> - Refs:
refas prop, cleanup via return function
Component structure
- One component per file
- Inner functions use arrow syntax:
const handleX = () => {}
スコア
総合スコア
50/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
レビュー
💬
レビュー機能は近日公開予定です