react-best-practices

Files (1)

• SKILL.md

SKILL.md (first lines)

# React Best Practices

Comprehensive performance optimization guide for React and Next.js applications. Contains 45+ rules across 8 categories, prioritized by impact.

## When to Use

Reference these guidelines when:

- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times

**Relevant Agents:** Blaze (React/Next.js), Spark (Electron), Tap (Expo/React Native)

---

## Rule Categories by Priority

| Priority | Category | Impact |
|----------|----------|--------|
| 1 | Eliminating Waterfalls | CRITICAL |
| 2 | Bundle Size Optimization | CRITICAL |
| 3 | Server-Side Performance | HIGH |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH |
| 5 | Re-render Optimization | MEDIUM |
| 6 | Rendering Performance | MEDIUM |
| 7 | JavaScript Performance | LOW-MEDIUM |

---

## 1. Eliminating Waterfalls (CRITICAL)

Waterfalls are the #1 performance killer. Fix these first.

### Move await into branches

**Bad:**

```typescript
async function handleRequest(userId: string, skipProcessing: boolean) {
  const userData = await fetchUserData(userId);  // Always waits

  if (skipProcessing) {
    return { skipped: true };  // Waited for nothing
  }

  return processUserData(userData);
}
```

**Good:**

```typescript
async function handleRequest(userId: string, skipProcessing: boolean) {
  if (skipProcessing) {
    return { skipped: true };  // Returns immediately
  }

  const userData = await fetchUserData(userId);
  return processUserData(userData);
}
```

### Parallelize independent operations

**Bad:**

```typescript
const user = await fetchUser(id);
const posts = await fetchPosts(id);
const comments = await fetchComments(id);
// Total time: user + posts + comments
```

**Good:**

```typescript
const [user, posts, comments] = await Promise.all([
  fetchUser(id),
  fetchPosts(id),
  fetchComments(id),
]);
// Total time: max(user, posts, comments)
```

### Start promises early, await late

**Bad:**

```typescript
export async function GET() {
  const data = await fetchData();  // Blocks immediately
  const transformed = transform(data);
  return Response.json(transformed);
}
```

**Good:**

```typescript
export async function GET() {
  const dataPromise = fetchData();  // Start immediately
  // ... do other setup work ...
  const data = await dataPromise;   // Await when needed
  return Response.json(transform(data));
}
```

### Use Suspense boundaries for streaming

```tsx
<Suspense fallback={<Loading />}>
  <SlowComponent />
</Suspense>
```

---

From 5DLabsInc/cto, AGPL-3.0.

More from 5DLabsInc/cto