react-best-practices

Files (1)

• SKILL.md

SKILL.md (first lines)

# React & Next.js Best Practices

## Reglas fundamentales

### Componentes
1. **Un componente, una responsabilidad** — Si necesitas comentar "hace X y Y", sepáralo
2. **Menos de 200 líneas por componente** — Más → refactoriza
3. **Props explícitas** — Nunca spread `{...props}` sin control
4. **Keys estables** — Nunca usar índice de array como key si la lista puede reordenarse

### Estado
```tsx
// ✅ Estado local para UI ephemeral
const [isOpen, setIsOpen] = useState(false);

// ✅ Estado derivado en lugar de duplicar
const fullName = `${firstName} ${lastName}`; // no state

// ❌ Nunca sincronizar state con props
// ✅ Usa useEffect solo para efectos externos (fetch, subscription, DOM)
```

### Performance

```tsx
// useMemo: para cálculos costosos
const sortedList = useMemo(
  () => items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// useCallback: para funciones pasadas como props a componentes memorizados
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

// memo: para componentes que re-renderizan innecesariamente
export const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
  return <div>{data}</div>;
});
```

⚠️ **No optimices prematuramente** — Usa estas técnicas solo cuando React DevTools muestre problemas reales.

## Next.js App Router

### Server vs Client Components

```
✅ Server Components (por defecto):
- Fetch de datos
- Acceso a base de datos
- Variables de entorno
- Componentes que no necesitan interactividad

✅ Client Components ('use client'):
- useState, useEffect, useReducer
- Event handlers (onClick, onChange)
- Browser-only APIs (window, localStorage)
- Librerías que usan hooks
```

### Data fetching

```tsx
// ✅ Fetch en Server Component — automáticamente deduplicado y cacheado
async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // revalidar cada hora
  });
  return <div>{data}</div>;
}

// ✅ Streaming con Suspense
<Suspense fallback={<Loading />}>
  <SlowComponent />
</Suspense>

// ✅ Parallel fetching
const [user, posts] = await Promise.all([
  fetchUser(id),
  fetchPosts(id)
]);
```

### Layouts y páginas

```
app/
├── layout.tsx          ← Root layout (HTML, body)
├── page.tsx            ← Página /
├── loading.tsx         ← Loading UI con Suspense
├── error.tsx           ← Error boundary
├── not-found.tsx       ← 404
└── (marketing)/        ← Route group (sin segmento de URL)
    ├── layout.tsx
    └── about/
        └── page.tsx    ← Página /about
```

### Metadata

```tsx
// app/layout.tsx o app/page.tsx
export const metadata: Metadata = {
  title: { template: '%s | Mi App', default: 'Mi App' },
  description: 'Descripción de la app',
  openGraph: { ... },
};

// metadata dinámica
export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await fetchProduct(params.id);
  return { title: product.name };
}
```

## Patrones de composición

From garri333/Skills, MIT.

More from garri333/Skills