react-patterns
React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition
Profile →npx skills add rohitg00/awesome-claude-code-toolkit --skill react-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# React Patterns ## use() Hook (React 19) `use()` reads values from Promises and Context directly in render. Unlike other hooks, it can be called inside conditionals and loops. ```tsx import { use } from 'react'; function UserProfile({ userPromise }: { userPromise: Promise<User> }) { const user = use(userPromise); return <h1>{user.name}</h1>; } function ThemeButton() { const theme = use(ThemeContext); return <button style={{ background: theme.primary }}>Click</button>; } ``` Wrap components that use `use()` with a Promise in a `<Suspense>` boundary. ## Server Components ```tsx // app/users/page.tsx - Server Component (default, no directive needed) import { UserList } from './UserList'; export default async function UsersPage() { const users = await fetch('https://api.example.com/users', { next: { revalidate: 60 }, }).then(r => r.json()); return <UserList users={users} />; } // app/users/UserList.tsx - Still a Server Component export function UserList({ users }: { users: User[] }) { return ( <ul> {users.map(u => ( <li key={u.id}> {u.name} <DeleteButton userId={u.id} /> </li> ))} </ul> ); } ``` Push `'use client'` as deep as possible. Only leaves that need interactivity should be Cli
- use() Hook (React 19)
- Server Components
- Server Actions
- useActionState (React 19)
- useOptimistic (React 19)
- Suspense Boundaries
- Error Boundaries
- Custom Hooks
- Compound Components
- Performance Rules
What does the react-patterns skill do?
React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition
How do I install it?
Run `npx skills add rohitg00/awesome-claude-code-toolkit --skill react-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rohitg00/awesome-claude-code-toolkit, a repository with 2,438 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.