f6bcc86881
New skills: - next-best-practices: Next.js 15+ RSC, async patterns, self-hosting (vercel-labs) - better-auth-best-practices: Official Better-Auth with Drizzle adapter (better-auth) - verification-before-completion: Evidence-based completion claims (obra/superpowers) - shadcn-ui: Component patterns with Tailwind v4 adaptation note (developer-kit) - writing-skills: TDD methodology for skill authoring (obra/superpowers) README reorganized by category with Mosaic Stack alignment section. Total: 9 skills (4 existing + 5 new). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
92 lines
1.8 KiB
Markdown
92 lines
1.8 KiB
Markdown
# Hydration Errors
|
|
|
|
Diagnose and fix React hydration mismatch errors.
|
|
|
|
## Error Signs
|
|
|
|
- "Hydration failed because the initial UI does not match"
|
|
- "Text content does not match server-rendered HTML"
|
|
|
|
## Debugging
|
|
|
|
In development, click the hydration error to see the server/client diff.
|
|
|
|
## Common Causes and Fixes
|
|
|
|
### Browser-only APIs
|
|
|
|
```tsx
|
|
// Bad: Causes mismatch - window doesn't exist on server
|
|
<div>{window.innerWidth}</div>
|
|
|
|
// Good: Use client component with mounted check
|
|
'use client'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export function ClientOnly({ children }: { children: React.ReactNode }) {
|
|
const [mounted, setMounted] = useState(false)
|
|
useEffect(() => setMounted(true), [])
|
|
return mounted ? children : null
|
|
}
|
|
```
|
|
|
|
### Date/Time Rendering
|
|
|
|
Server and client may be in different timezones:
|
|
|
|
```tsx
|
|
// Bad: Causes mismatch
|
|
<span>{new Date().toLocaleString()}</span>
|
|
|
|
// Good: Render on client only
|
|
'use client'
|
|
const [time, setTime] = useState<string>()
|
|
useEffect(() => setTime(new Date().toLocaleString()), [])
|
|
```
|
|
|
|
### Random Values or IDs
|
|
|
|
```tsx
|
|
// Bad: Random values differ between server and client
|
|
<div id={Math.random().toString()}>
|
|
|
|
// Good: Use useId hook
|
|
import { useId } from 'react'
|
|
|
|
function Input() {
|
|
const id = useId()
|
|
return <input id={id} />
|
|
}
|
|
```
|
|
|
|
### Invalid HTML Nesting
|
|
|
|
```tsx
|
|
// Bad: Invalid - div inside p
|
|
<p><div>Content</div></p>
|
|
|
|
// Bad: Invalid - p inside p
|
|
<p><p>Nested</p></p>
|
|
|
|
// Good: Valid nesting
|
|
<div><p>Content</p></div>
|
|
```
|
|
|
|
### Third-party Scripts
|
|
|
|
Scripts that modify DOM during hydration.
|
|
|
|
```tsx
|
|
// Good: Use next/script with afterInteractive
|
|
import Script from 'next/script'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<Script
|
|
src="https://example.com/script.js"
|
|
strategy="afterInteractive"
|
|
/>
|
|
)
|
|
}
|
|
```
|