# React Patterns

React 19 patterns including Server Components, Actions, Suspense, hooks, and component...

- Repository: https://github.com/rohitg00/awesome-claude-code-toolkit (2800 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-05-12
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add rohitg00/awesome-claude-code-toolkit --skill react-patterns -g -a claude-code -y`
Codex: `npx skills add rohitg00/awesome-claude-code-toolkit --skill react-patterns -g -a codex -y`
Cursor: `npx skills add rohitg00/awesome-claude-code-toolkit --skill react-patterns -g -a cursor -y`
Gemini CLI: `npx skills add rohitg00/awesome-claude-code-toolkit --skill react-patterns -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add rohitg00/awesome-claude-code-toolkit`

## Description

React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 Client Components.

## Server Actions

```tsx
// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const body = formData.get('body') as string;

  await db.insert(posts).values({ title, body });

  revalidatePath('/posts');
  redirect('/posts');
}
```

```tsx
// app/posts/new/page.tsx
import { createPost } from '../actions';

The rest: https://github.com/rohitg00/awesome-claude-code-toolkit/blob/HEAD/skills/react-patterns/SKILL.md