Add NDK skill documentation and examples
- Introduced comprehensive documentation for the Nostr Development Kit (NDK) including an overview, quick reference, and troubleshooting guide. - Added detailed examples covering initialization, authentication, event publishing, querying, and user profile management. - Structured the documentation to facilitate quick lookups and deep learning, based on real-world usage patterns from the Plebeian Market application. - Created an index for examples to enhance usability and navigation. - Bumped version to 1.0.0 to reflect the addition of this new skill set.
This commit is contained in:
119
.claude/skills/react/README.md
Normal file
119
.claude/skills/react/README.md
Normal file
@@ -0,0 +1,119 @@
|
||||
# React 19 Skill
|
||||
|
||||
A comprehensive Claude skill for working with React 19, including hooks, components, server components, and modern React architecture.
|
||||
|
||||
## Contents
|
||||
|
||||
### Main Skill File
|
||||
- **SKILL.md** - Main skill document with React 19 fundamentals, hooks, components, and best practices
|
||||
|
||||
### References
|
||||
- **hooks-quick-reference.md** - Quick reference for all React hooks with examples
|
||||
- **server-components.md** - Complete guide to React Server Components and Server Functions
|
||||
- **performance.md** - Performance optimization strategies and techniques
|
||||
|
||||
### Examples
|
||||
- **practical-patterns.tsx** - Real-world React patterns and solutions
|
||||
|
||||
## What This Skill Covers
|
||||
|
||||
### Core Topics
|
||||
- React 19 features and improvements
|
||||
- All built-in hooks (useState, useEffect, useTransition, useOptimistic, etc.)
|
||||
- Component patterns and composition
|
||||
- Server Components and Server Functions
|
||||
- React Compiler and automatic optimization
|
||||
- Performance optimization techniques
|
||||
- Form handling and validation
|
||||
- Error boundaries and error handling
|
||||
- Context and global state management
|
||||
- Code splitting and lazy loading
|
||||
|
||||
### Best Practices
|
||||
- Component design principles
|
||||
- State management strategies
|
||||
- Performance optimization
|
||||
- Error handling patterns
|
||||
- TypeScript integration
|
||||
- Testing considerations
|
||||
- Accessibility guidelines
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
- Building React 19 applications
|
||||
- Working with React hooks
|
||||
- Implementing server components
|
||||
- Optimizing React performance
|
||||
- Troubleshooting React-specific issues
|
||||
- Understanding concurrent features
|
||||
- Working with forms and user input
|
||||
- Implementing complex UI patterns
|
||||
|
||||
## Quick Start Examples
|
||||
|
||||
### Basic Component
|
||||
```typescript
|
||||
interface ButtonProps {
|
||||
label: string
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const Button = ({ label, onClick }: ButtonProps) => {
|
||||
return <button onClick={onClick}>{label}</button>
|
||||
}
|
||||
```
|
||||
|
||||
### Using Hooks
|
||||
```typescript
|
||||
const Counter = () => {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
console.log(`Count is: ${count}`)
|
||||
}, [count])
|
||||
|
||||
return (
|
||||
<button onClick={() => setCount(c => c + 1)}>
|
||||
Count: {count}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Server Component
|
||||
```typescript
|
||||
const Page = async () => {
|
||||
const data = await fetchData()
|
||||
return <div>{data}</div>
|
||||
}
|
||||
```
|
||||
|
||||
### Server Function
|
||||
```typescript
|
||||
'use server'
|
||||
|
||||
export async function createUser(formData: FormData) {
|
||||
const name = formData.get('name')
|
||||
return await db.user.create({ data: { name } })
|
||||
}
|
||||
```
|
||||
|
||||
## Related Skills
|
||||
|
||||
- **typescript** - TypeScript patterns for React
|
||||
- **ndk** - Nostr integration with React
|
||||
- **skill-creator** - Creating reusable component libraries
|
||||
|
||||
## Resources
|
||||
|
||||
- [React Documentation](https://react.dev)
|
||||
- [React API Reference](https://react.dev/reference/react)
|
||||
- [React Hooks Reference](https://react.dev/reference/react/hooks)
|
||||
- [React Server Components](https://react.dev/reference/rsc)
|
||||
- [React Compiler](https://react.dev/reference/react-compiler)
|
||||
|
||||
## Version
|
||||
|
||||
This skill is based on React 19.2 and includes the latest features and APIs.
|
||||
|
||||
1026
.claude/skills/react/SKILL.md
Normal file
1026
.claude/skills/react/SKILL.md
Normal file
File diff suppressed because it is too large
Load Diff
878
.claude/skills/react/examples/practical-patterns.tsx
Normal file
878
.claude/skills/react/examples/practical-patterns.tsx
Normal file
@@ -0,0 +1,878 @@
|
||||
# React Practical Examples
|
||||
|
||||
This file contains real-world examples of React patterns and solutions.
|
||||
|
||||
## Example 1: Custom Hook for Data Fetching
|
||||
|
||||
```typescript
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
interface FetchState<T> {
|
||||
data: T | null
|
||||
loading: boolean
|
||||
error: Error | null
|
||||
}
|
||||
|
||||
const useFetch = <T,>(url: string) => {
|
||||
const [state, setState] = useState<FetchState<T>>({
|
||||
data: null,
|
||||
loading: true,
|
||||
error: null
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
const controller = new AbortController()
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setState(prev => ({ ...prev, loading: true, error: null }))
|
||||
|
||||
const response = await fetch(url, {
|
||||
signal: controller.signal
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!cancelled) {
|
||||
setState({ data, loading: false, error: null })
|
||||
}
|
||||
} catch (error) {
|
||||
if (!cancelled && error.name !== 'AbortError') {
|
||||
setState({
|
||||
data: null,
|
||||
loading: false,
|
||||
error: error as Error
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchData()
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
controller.abort()
|
||||
}
|
||||
}, [url])
|
||||
|
||||
return state
|
||||
}
|
||||
|
||||
// Usage
|
||||
const UserProfile = ({ userId }: { userId: string }) => {
|
||||
const { data, loading, error } = useFetch<User>(`/api/users/${userId}`)
|
||||
|
||||
if (loading) return <Spinner />
|
||||
if (error) return <ErrorMessage error={error} />
|
||||
if (!data) return null
|
||||
|
||||
return <UserCard user={data} />
|
||||
}
|
||||
```
|
||||
|
||||
## Example 2: Form with Validation
|
||||
|
||||
```typescript
|
||||
import { useState, useCallback } from 'react'
|
||||
import { z } from 'zod'
|
||||
|
||||
const userSchema = z.object({
|
||||
name: z.string().min(2, 'Name must be at least 2 characters'),
|
||||
email: z.string().email('Invalid email address'),
|
||||
age: z.number().min(18, 'Must be 18 or older')
|
||||
})
|
||||
|
||||
type UserForm = z.infer<typeof userSchema>
|
||||
type FormErrors = Partial<Record<keyof UserForm, string>>
|
||||
|
||||
const UserForm = () => {
|
||||
const [formData, setFormData] = useState<UserForm>({
|
||||
name: '',
|
||||
email: '',
|
||||
age: 0
|
||||
})
|
||||
const [errors, setErrors] = useState<FormErrors>({})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const handleChange = useCallback((
|
||||
field: keyof UserForm,
|
||||
value: string | number
|
||||
) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }))
|
||||
// Clear error when user starts typing
|
||||
setErrors(prev => ({ ...prev, [field]: undefined }))
|
||||
}, [])
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
// Validate
|
||||
const result = userSchema.safeParse(formData)
|
||||
if (!result.success) {
|
||||
const fieldErrors: FormErrors = {}
|
||||
result.error.errors.forEach(err => {
|
||||
const field = err.path[0] as keyof UserForm
|
||||
fieldErrors[field] = err.message
|
||||
})
|
||||
setErrors(fieldErrors)
|
||||
return
|
||||
}
|
||||
|
||||
// Submit
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
await submitUser(result.data)
|
||||
// Success handling
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label htmlFor="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={e => handleChange('name', e.target.value)}
|
||||
/>
|
||||
{errors.name && <span className="error">{errors.name}</span>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={e => handleChange('email', e.target.value)}
|
||||
/>
|
||||
{errors.email && <span className="error">{errors.email}</span>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="age">Age</label>
|
||||
<input
|
||||
id="age"
|
||||
type="number"
|
||||
value={formData.age || ''}
|
||||
onChange={e => handleChange('age', Number(e.target.value))}
|
||||
/>
|
||||
{errors.age && <span className="error">{errors.age}</span>}
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit'}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Example 3: Modal with Portal
|
||||
|
||||
```typescript
|
||||
import { createPortal } from 'react-dom'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
children: React.ReactNode
|
||||
title?: string
|
||||
}
|
||||
|
||||
const Modal = ({ isOpen, onClose, children, title }: ModalProps) => {
|
||||
const modalRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Close on Escape key
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
// Prevent body scroll
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
document.body.style.overflow = 'unset'
|
||||
}
|
||||
}, [isOpen, onClose])
|
||||
|
||||
// Close on backdrop click
|
||||
const handleBackdropClick = (e: React.MouseEvent) => {
|
||||
if (e.target === modalRef.current) {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
onClick={handleBackdropClick}
|
||||
>
|
||||
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
{title && <h2 className="text-xl font-bold">{title}</h2>}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)
|
||||
}
|
||||
|
||||
// Usage
|
||||
const App = () => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setIsOpen(true)}>Open Modal</button>
|
||||
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="My Modal">
|
||||
<p>Modal content goes here</p>
|
||||
<button onClick={() => setIsOpen(false)}>Close</button>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Example 4: Infinite Scroll
|
||||
|
||||
```typescript
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
|
||||
interface InfiniteScrollProps<T> {
|
||||
fetchData: (page: number) => Promise<T[]>
|
||||
renderItem: (item: T, index: number) => React.ReactNode
|
||||
loader?: React.ReactNode
|
||||
endMessage?: React.ReactNode
|
||||
}
|
||||
|
||||
const InfiniteScroll = <T extends { id: string | number },>({
|
||||
fetchData,
|
||||
renderItem,
|
||||
loader = <div>Loading...</div>,
|
||||
endMessage = <div>No more items</div>
|
||||
}: InfiniteScrollProps<T>) => {
|
||||
const [items, setItems] = useState<T[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const observerRef = useRef<IntersectionObserver | null>(null)
|
||||
const loadMoreRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const loadMore = useCallback(async () => {
|
||||
if (loading || !hasMore) return
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const newItems = await fetchData(page)
|
||||
|
||||
if (newItems.length === 0) {
|
||||
setHasMore(false)
|
||||
} else {
|
||||
setItems(prev => [...prev, ...newItems])
|
||||
setPage(prev => prev + 1)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load items:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page, loading, hasMore, fetchData])
|
||||
|
||||
// Set up intersection observer
|
||||
useEffect(() => {
|
||||
observerRef.current = new IntersectionObserver(
|
||||
entries => {
|
||||
if (entries[0].isIntersecting) {
|
||||
loadMore()
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
)
|
||||
|
||||
const currentRef = loadMoreRef.current
|
||||
if (currentRef) {
|
||||
observerRef.current.observe(currentRef)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (observerRef.current && currentRef) {
|
||||
observerRef.current.unobserve(currentRef)
|
||||
}
|
||||
}
|
||||
}, [loadMore])
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
loadMore()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
{items.map((item, index) => (
|
||||
<div key={item.id}>
|
||||
{renderItem(item, index)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div ref={loadMoreRef}>
|
||||
{loading && loader}
|
||||
{!loading && !hasMore && endMessage}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Usage
|
||||
const PostsList = () => {
|
||||
const fetchPosts = async (page: number) => {
|
||||
const response = await fetch(`/api/posts?page=${page}`)
|
||||
return response.json()
|
||||
}
|
||||
|
||||
return (
|
||||
<InfiniteScroll<Post>
|
||||
fetchData={fetchPosts}
|
||||
renderItem={(post) => <PostCard post={post} />}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Example 5: Dark Mode Toggle
|
||||
|
||||
```typescript
|
||||
import { createContext, useContext, useState, useEffect } from 'react'
|
||||
|
||||
type Theme = 'light' | 'dark'
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme
|
||||
toggleTheme: () => void
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | null>(null)
|
||||
|
||||
export const useTheme = () => {
|
||||
const context = useContext(ThemeContext)
|
||||
if (!context) {
|
||||
throw new Error('useTheme must be used within ThemeProvider')
|
||||
}
|
||||
return context
|
||||
}
|
||||
|
||||
export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [theme, setTheme] = useState<Theme>(() => {
|
||||
// Check localStorage and system preference
|
||||
const saved = localStorage.getItem('theme') as Theme | null
|
||||
if (saved) return saved
|
||||
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return 'dark'
|
||||
}
|
||||
|
||||
return 'light'
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
// Update DOM and localStorage
|
||||
const root = document.documentElement
|
||||
root.classList.remove('light', 'dark')
|
||||
root.classList.add(theme)
|
||||
localStorage.setItem('theme', theme)
|
||||
}, [theme])
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(prev => prev === 'light' ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
// Usage
|
||||
const ThemeToggle = () => {
|
||||
const { theme, toggleTheme } = useTheme()
|
||||
|
||||
return (
|
||||
<button onClick={toggleTheme} aria-label="Toggle theme">
|
||||
{theme === 'light' ? '🌙' : '☀️'}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Example 6: Debounced Search
|
||||
|
||||
```typescript
|
||||
import { useState, useEffect, useMemo } from 'react'
|
||||
|
||||
const useDebounce = <T,>(value: T, delay: number): T => {
|
||||
const [debouncedValue, setDebouncedValue] = useState(value)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedValue(value)
|
||||
}, delay)
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
}, [value, delay])
|
||||
|
||||
return debouncedValue
|
||||
}
|
||||
|
||||
const SearchPage = () => {
|
||||
const [query, setQuery] = useState('')
|
||||
const [results, setResults] = useState<Product[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const debouncedQuery = useDebounce(query, 500)
|
||||
|
||||
useEffect(() => {
|
||||
if (!debouncedQuery) {
|
||||
setResults([])
|
||||
return
|
||||
}
|
||||
|
||||
const searchProducts = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await fetch(`/api/search?q=${debouncedQuery}`)
|
||||
const data = await response.json()
|
||||
setResults(data)
|
||||
} catch (error) {
|
||||
console.error('Search failed:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
searchProducts()
|
||||
}, [debouncedQuery])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
placeholder="Search products..."
|
||||
/>
|
||||
|
||||
{loading && <Spinner />}
|
||||
|
||||
{!loading && results.length > 0 && (
|
||||
<div>
|
||||
{results.map(product => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && query && results.length === 0 && (
|
||||
<p>No results found for "{query}"</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Example 7: Tabs Component
|
||||
|
||||
```typescript
|
||||
import { createContext, useContext, useState, useId } from 'react'
|
||||
|
||||
interface TabsContextType {
|
||||
activeTab: string
|
||||
setActiveTab: (id: string) => void
|
||||
tabsId: string
|
||||
}
|
||||
|
||||
const TabsContext = createContext<TabsContextType | null>(null)
|
||||
|
||||
const useTabs = () => {
|
||||
const context = useContext(TabsContext)
|
||||
if (!context) throw new Error('Tabs compound components must be used within Tabs')
|
||||
return context
|
||||
}
|
||||
|
||||
interface TabsProps {
|
||||
children: React.ReactNode
|
||||
defaultValue: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Tabs = ({ children, defaultValue, className }: TabsProps) => {
|
||||
const [activeTab, setActiveTab] = useState(defaultValue)
|
||||
const tabsId = useId()
|
||||
|
||||
return (
|
||||
<TabsContext.Provider value={{ activeTab, setActiveTab, tabsId }}>
|
||||
<div className={className}>
|
||||
{children}
|
||||
</div>
|
||||
</TabsContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const TabsList = ({ children, className }: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) => (
|
||||
<div role="tablist" className={className}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
interface TabsTriggerProps {
|
||||
value: string
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
const TabsTrigger = ({ value, children, className }: TabsTriggerProps) => {
|
||||
const { activeTab, setActiveTab, tabsId } = useTabs()
|
||||
const isActive = activeTab === value
|
||||
|
||||
return (
|
||||
<button
|
||||
role="tab"
|
||||
id={`${tabsId}-tab-${value}`}
|
||||
aria-controls={`${tabsId}-panel-${value}`}
|
||||
aria-selected={isActive}
|
||||
onClick={() => setActiveTab(value)}
|
||||
className={`${className} ${isActive ? 'active' : ''}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
interface TabsContentProps {
|
||||
value: string
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
const TabsContent = ({ value, children, className }: TabsContentProps) => {
|
||||
const { activeTab, tabsId } = useTabs()
|
||||
|
||||
if (activeTab !== value) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
id={`${tabsId}-panel-${value}`}
|
||||
aria-labelledby={`${tabsId}-tab-${value}`}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Export compound component
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
|
||||
// Usage
|
||||
const App = () => (
|
||||
<Tabs defaultValue="profile">
|
||||
<TabsList>
|
||||
<TabsTrigger value="profile">Profile</TabsTrigger>
|
||||
<TabsTrigger value="settings">Settings</TabsTrigger>
|
||||
<TabsTrigger value="notifications">Notifications</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="profile">
|
||||
<h2>Profile Content</h2>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="settings">
|
||||
<h2>Settings Content</h2>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="notifications">
|
||||
<h2>Notifications Content</h2>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
)
|
||||
```
|
||||
|
||||
## Example 8: Error Boundary
|
||||
|
||||
```typescript
|
||||
import { Component, ErrorInfo, ReactNode } from 'react'
|
||||
|
||||
interface Props {
|
||||
children: ReactNode
|
||||
fallback?: (error: Error, reset: () => void) => ReactNode
|
||||
onError?: (error: Error, errorInfo: ErrorInfo) => void
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean
|
||||
error: Error | null
|
||||
}
|
||||
|
||||
class ErrorBoundary extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
this.state = { hasError: false, error: null }
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error }
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error('ErrorBoundary caught:', error, errorInfo)
|
||||
this.props.onError?.(error, errorInfo)
|
||||
}
|
||||
|
||||
reset = () => {
|
||||
this.setState({ hasError: false, error: null })
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError && this.state.error) {
|
||||
if (this.props.fallback) {
|
||||
return this.props.fallback(this.state.error, this.reset)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="error-boundary">
|
||||
<h2>Something went wrong</h2>
|
||||
<details>
|
||||
<summary>Error details</summary>
|
||||
<pre>{this.state.error.message}</pre>
|
||||
</details>
|
||||
<button onClick={this.reset}>Try again</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return this.props.children
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
const App = () => (
|
||||
<ErrorBoundary
|
||||
fallback={(error, reset) => (
|
||||
<div>
|
||||
<h1>Oops! Something went wrong</h1>
|
||||
<p>{error.message}</p>
|
||||
<button onClick={reset}>Retry</button>
|
||||
</div>
|
||||
)}
|
||||
onError={(error, errorInfo) => {
|
||||
// Send to error tracking service
|
||||
console.error('Error logged:', error, errorInfo)
|
||||
}}
|
||||
>
|
||||
<YourApp />
|
||||
</ErrorBoundary>
|
||||
)
|
||||
```
|
||||
|
||||
## Example 9: Custom Hook for Local Storage
|
||||
|
||||
```typescript
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
|
||||
const useLocalStorage = <T,>(
|
||||
key: string,
|
||||
initialValue: T
|
||||
): [T, (value: T | ((val: T) => T)) => void, () => void] => {
|
||||
// Get initial value from localStorage
|
||||
const [storedValue, setStoredValue] = useState<T>(() => {
|
||||
try {
|
||||
const item = window.localStorage.getItem(key)
|
||||
return item ? JSON.parse(item) : initialValue
|
||||
} catch (error) {
|
||||
console.error(`Error loading ${key} from localStorage:`, error)
|
||||
return initialValue
|
||||
}
|
||||
})
|
||||
|
||||
// Update localStorage when value changes
|
||||
const setValue = useCallback((value: T | ((val: T) => T)) => {
|
||||
try {
|
||||
const valueToStore = value instanceof Function ? value(storedValue) : value
|
||||
setStoredValue(valueToStore)
|
||||
window.localStorage.setItem(key, JSON.stringify(valueToStore))
|
||||
|
||||
// Dispatch storage event for other tabs
|
||||
window.dispatchEvent(new Event('storage'))
|
||||
} catch (error) {
|
||||
console.error(`Error saving ${key} to localStorage:`, error)
|
||||
}
|
||||
}, [key, storedValue])
|
||||
|
||||
// Remove from localStorage
|
||||
const removeValue = useCallback(() => {
|
||||
try {
|
||||
window.localStorage.removeItem(key)
|
||||
setStoredValue(initialValue)
|
||||
} catch (error) {
|
||||
console.error(`Error removing ${key} from localStorage:`, error)
|
||||
}
|
||||
}, [key, initialValue])
|
||||
|
||||
// Listen for changes in other tabs
|
||||
useEffect(() => {
|
||||
const handleStorageChange = (e: StorageEvent) => {
|
||||
if (e.key === key && e.newValue) {
|
||||
setStoredValue(JSON.parse(e.newValue))
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('storage', handleStorageChange)
|
||||
return () => window.removeEventListener('storage', handleStorageChange)
|
||||
}, [key])
|
||||
|
||||
return [storedValue, setValue, removeValue]
|
||||
}
|
||||
|
||||
// Usage
|
||||
const UserPreferences = () => {
|
||||
const [preferences, setPreferences, clearPreferences] = useLocalStorage('user-prefs', {
|
||||
theme: 'light',
|
||||
language: 'en',
|
||||
notifications: true
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.notifications}
|
||||
onChange={e => setPreferences({
|
||||
...preferences,
|
||||
notifications: e.target.checked
|
||||
})}
|
||||
/>
|
||||
Enable notifications
|
||||
</label>
|
||||
|
||||
<button onClick={clearPreferences}>
|
||||
Reset to defaults
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Example 10: Optimistic Updates with useOptimistic
|
||||
|
||||
```typescript
|
||||
'use client'
|
||||
|
||||
import { useOptimistic } from 'react'
|
||||
import { likePost, unlikePost } from './actions'
|
||||
|
||||
interface Post {
|
||||
id: string
|
||||
content: string
|
||||
likes: number
|
||||
isLiked: boolean
|
||||
}
|
||||
|
||||
const PostCard = ({ post }: { post: Post }) => {
|
||||
const [optimisticPost, addOptimistic] = useOptimistic(
|
||||
post,
|
||||
(currentPost, update: Partial<Post>) => ({
|
||||
...currentPost,
|
||||
...update
|
||||
})
|
||||
)
|
||||
|
||||
const handleLike = async () => {
|
||||
// Optimistically update UI
|
||||
addOptimistic({
|
||||
likes: optimisticPost.likes + 1,
|
||||
isLiked: true
|
||||
})
|
||||
|
||||
try {
|
||||
// Send server request
|
||||
await likePost(post.id)
|
||||
} catch (error) {
|
||||
// Server will send correct state via revalidation
|
||||
console.error('Failed to like post:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUnlike = async () => {
|
||||
addOptimistic({
|
||||
likes: optimisticPost.likes - 1,
|
||||
isLiked: false
|
||||
})
|
||||
|
||||
try {
|
||||
await unlikePost(post.id)
|
||||
} catch (error) {
|
||||
console.error('Failed to unlike post:', error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="post-card">
|
||||
<p>{optimisticPost.content}</p>
|
||||
<button
|
||||
onClick={optimisticPost.isLiked ? handleUnlike : handleLike}
|
||||
className={optimisticPost.isLiked ? 'liked' : ''}
|
||||
>
|
||||
❤️ {optimisticPost.likes}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## References
|
||||
|
||||
These examples demonstrate:
|
||||
- Custom hooks for reusable logic
|
||||
- Form handling with validation
|
||||
- Portal usage for modals
|
||||
- Infinite scroll with Intersection Observer
|
||||
- Context for global state
|
||||
- Debouncing for performance
|
||||
- Compound components pattern
|
||||
- Error boundaries
|
||||
- LocalStorage integration
|
||||
- Optimistic updates (React 19)
|
||||
|
||||
291
.claude/skills/react/references/hooks-quick-reference.md
Normal file
291
.claude/skills/react/references/hooks-quick-reference.md
Normal file
@@ -0,0 +1,291 @@
|
||||
# React Hooks Quick Reference
|
||||
|
||||
## State Hooks
|
||||
|
||||
### useState
|
||||
```typescript
|
||||
const [state, setState] = useState<Type>(initialValue)
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
// Functional update
|
||||
setCount(prev => prev + 1)
|
||||
|
||||
// Lazy initialization
|
||||
const [state, setState] = useState(() => expensiveComputation())
|
||||
```
|
||||
|
||||
### useReducer
|
||||
```typescript
|
||||
type State = { count: number }
|
||||
type Action = { type: 'increment' } | { type: 'decrement' }
|
||||
|
||||
const reducer = (state: State, action: Action): State => {
|
||||
switch (action.type) {
|
||||
case 'increment': return { count: state.count + 1 }
|
||||
case 'decrement': return { count: state.count - 1 }
|
||||
}
|
||||
}
|
||||
|
||||
const [state, dispatch] = useReducer(reducer, { count: 0 })
|
||||
dispatch({ type: 'increment' })
|
||||
```
|
||||
|
||||
### useActionState (React 19)
|
||||
```typescript
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
async (previousState, formData: FormData) => {
|
||||
// Server action
|
||||
return await processForm(formData)
|
||||
},
|
||||
initialState
|
||||
)
|
||||
|
||||
<form action={formAction}>
|
||||
<button disabled={isPending}>Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Effect Hooks
|
||||
|
||||
### useEffect
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
// Side effect
|
||||
const subscription = api.subscribe()
|
||||
|
||||
// Cleanup
|
||||
return () => subscription.unsubscribe()
|
||||
}, [dependencies])
|
||||
```
|
||||
|
||||
**Timing**: After render & paint
|
||||
**Use for**: Data fetching, subscriptions, DOM mutations
|
||||
|
||||
### useLayoutEffect
|
||||
```typescript
|
||||
useLayoutEffect(() => {
|
||||
// Runs before paint
|
||||
const height = ref.current.offsetHeight
|
||||
setHeight(height)
|
||||
}, [])
|
||||
```
|
||||
|
||||
**Timing**: After render, before paint
|
||||
**Use for**: DOM measurements, preventing flicker
|
||||
|
||||
### useInsertionEffect
|
||||
```typescript
|
||||
useInsertionEffect(() => {
|
||||
// Insert styles before any DOM reads
|
||||
const style = document.createElement('style')
|
||||
style.textContent = css
|
||||
document.head.appendChild(style)
|
||||
return () => document.head.removeChild(style)
|
||||
}, [css])
|
||||
```
|
||||
|
||||
**Timing**: Before any DOM mutations
|
||||
**Use for**: CSS-in-JS libraries
|
||||
|
||||
## Performance Hooks
|
||||
|
||||
### useMemo
|
||||
```typescript
|
||||
const memoizedValue = useMemo(() => {
|
||||
return expensiveComputation(a, b)
|
||||
}, [a, b])
|
||||
```
|
||||
|
||||
**Use for**: Expensive calculations, stable object references
|
||||
|
||||
### useCallback
|
||||
```typescript
|
||||
const memoizedCallback = useCallback(() => {
|
||||
doSomething(a, b)
|
||||
}, [a, b])
|
||||
```
|
||||
|
||||
**Use for**: Passing callbacks to optimized components
|
||||
|
||||
## Ref Hooks
|
||||
|
||||
### useRef
|
||||
```typescript
|
||||
// DOM reference
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
ref.current?.focus()
|
||||
|
||||
// Mutable value (doesn't trigger re-render)
|
||||
const countRef = useRef(0)
|
||||
countRef.current += 1
|
||||
```
|
||||
|
||||
### useImperativeHandle
|
||||
```typescript
|
||||
useImperativeHandle(ref, () => ({
|
||||
focus: () => inputRef.current?.focus(),
|
||||
clear: () => inputRef.current && (inputRef.current.value = '')
|
||||
}), [])
|
||||
```
|
||||
|
||||
## Context Hook
|
||||
|
||||
### useContext
|
||||
```typescript
|
||||
const value = useContext(MyContext)
|
||||
```
|
||||
|
||||
Must be used within a Provider.
|
||||
|
||||
## Transition Hooks
|
||||
|
||||
### useTransition
|
||||
```typescript
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
startTransition(() => {
|
||||
setState(newValue) // Non-urgent update
|
||||
})
|
||||
```
|
||||
|
||||
### useDeferredValue
|
||||
```typescript
|
||||
const [input, setInput] = useState('')
|
||||
const deferredInput = useDeferredValue(input)
|
||||
|
||||
// Use deferredInput for expensive operations
|
||||
const results = useMemo(() => search(deferredInput), [deferredInput])
|
||||
```
|
||||
|
||||
## Optimistic Updates (React 19)
|
||||
|
||||
### useOptimistic
|
||||
```typescript
|
||||
const [optimisticState, addOptimistic] = useOptimistic(
|
||||
actualState,
|
||||
(currentState, optimisticValue) => {
|
||||
return [...currentState, optimisticValue]
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
## Other Hooks
|
||||
|
||||
### useId
|
||||
```typescript
|
||||
const id = useId()
|
||||
<label htmlFor={id}>Name</label>
|
||||
<input id={id} />
|
||||
```
|
||||
|
||||
### useSyncExternalStore
|
||||
```typescript
|
||||
const state = useSyncExternalStore(
|
||||
subscribe,
|
||||
getSnapshot,
|
||||
getServerSnapshot
|
||||
)
|
||||
```
|
||||
|
||||
### useDebugValue
|
||||
```typescript
|
||||
useDebugValue(isOnline ? 'Online' : 'Offline')
|
||||
```
|
||||
|
||||
### use (React 19)
|
||||
```typescript
|
||||
// Read context or promise
|
||||
const value = use(MyContext)
|
||||
const data = use(fetchPromise) // Must be in Suspense
|
||||
```
|
||||
|
||||
## Form Hooks (React DOM)
|
||||
|
||||
### useFormStatus
|
||||
```typescript
|
||||
import { useFormStatus } from 'react-dom'
|
||||
|
||||
const { pending, data, method, action } = useFormStatus()
|
||||
```
|
||||
|
||||
## Hook Rules
|
||||
|
||||
1. **Only call at top level** - Not in loops, conditions, or nested functions
|
||||
2. **Only call from React functions** - Components or custom hooks
|
||||
3. **Custom hooks start with "use"** - Naming convention
|
||||
4. **Same hooks in same order** - Every render must call same hooks
|
||||
|
||||
## Dependencies Best Practices
|
||||
|
||||
1. **Include all used values** - Variables, props, state from component scope
|
||||
2. **Use ESLint plugin** - `eslint-plugin-react-hooks` enforces rules
|
||||
3. **Functions as dependencies** - Wrap with useCallback or define outside component
|
||||
4. **Object/array dependencies** - Use useMemo for stable references
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Fetching Data
|
||||
```typescript
|
||||
const [data, setData] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
|
||||
fetch('/api/data', { signal: controller.signal })
|
||||
.then(res => res.json())
|
||||
.then(setData)
|
||||
.catch(setError)
|
||||
.finally(() => setLoading(false))
|
||||
|
||||
return () => controller.abort()
|
||||
}, [])
|
||||
```
|
||||
|
||||
### Debouncing
|
||||
```typescript
|
||||
const [value, setValue] = useState('')
|
||||
const [debouncedValue, setDebouncedValue] = useState(value)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedValue(value)
|
||||
}, 500)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [value])
|
||||
```
|
||||
|
||||
### Previous Value
|
||||
```typescript
|
||||
const usePrevious = <T,>(value: T): T | undefined => {
|
||||
const ref = useRef<T>()
|
||||
useEffect(() => {
|
||||
ref.current = value
|
||||
})
|
||||
return ref.current
|
||||
}
|
||||
```
|
||||
|
||||
### Interval
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
const id = setInterval(() => {
|
||||
setCount(c => c + 1)
|
||||
}, 1000)
|
||||
|
||||
return () => clearInterval(id)
|
||||
}, [])
|
||||
```
|
||||
|
||||
### Event Listeners
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
const handleResize = () => setWidth(window.innerWidth)
|
||||
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => window.removeEventListener('resize', handleResize)
|
||||
}, [])
|
||||
```
|
||||
|
||||
658
.claude/skills/react/references/performance.md
Normal file
658
.claude/skills/react/references/performance.md
Normal file
@@ -0,0 +1,658 @@
|
||||
# React Performance Optimization Guide
|
||||
|
||||
## Overview
|
||||
|
||||
This guide covers performance optimization strategies for React 19 applications.
|
||||
|
||||
## Measurement & Profiling
|
||||
|
||||
### React DevTools Profiler
|
||||
|
||||
Record performance data:
|
||||
1. Open React DevTools
|
||||
2. Go to Profiler tab
|
||||
3. Click record button
|
||||
4. Interact with app
|
||||
5. Stop recording
|
||||
6. Analyze flame graph and ranked chart
|
||||
|
||||
### Profiler Component
|
||||
|
||||
```typescript
|
||||
import { Profiler } from 'react'
|
||||
|
||||
const App = () => {
|
||||
const onRender = (
|
||||
id: string,
|
||||
phase: 'mount' | 'update',
|
||||
actualDuration: number,
|
||||
baseDuration: number,
|
||||
startTime: number,
|
||||
commitTime: number
|
||||
) => {
|
||||
console.log({
|
||||
component: id,
|
||||
phase,
|
||||
actualDuration, // Time spent rendering this update
|
||||
baseDuration // Estimated time without memoization
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Profiler id="App" onRender={onRender}>
|
||||
<YourApp />
|
||||
</Profiler>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Performance Metrics
|
||||
|
||||
```typescript
|
||||
// Custom performance tracking
|
||||
const startTime = performance.now()
|
||||
// ... do work
|
||||
const endTime = performance.now()
|
||||
console.log(`Operation took ${endTime - startTime}ms`)
|
||||
|
||||
// React rendering metrics
|
||||
import { unstable_trace as trace } from 'react'
|
||||
|
||||
trace('expensive-operation', async () => {
|
||||
await performExpensiveOperation()
|
||||
})
|
||||
```
|
||||
|
||||
## Memoization Strategies
|
||||
|
||||
### React.memo
|
||||
|
||||
Prevent unnecessary re-renders:
|
||||
|
||||
```typescript
|
||||
// Basic memoization
|
||||
const ExpensiveComponent = memo(({ data }: Props) => {
|
||||
return <div>{processData(data)}</div>
|
||||
})
|
||||
|
||||
// Custom comparison
|
||||
const MemoizedComponent = memo(
|
||||
({ user }: Props) => <UserCard user={user} />,
|
||||
(prevProps, nextProps) => {
|
||||
// Return true if props are equal (skip render)
|
||||
return prevProps.user.id === nextProps.user.id
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
**When to use:**
|
||||
- Component renders often with same props
|
||||
- Rendering is expensive
|
||||
- Component receives complex prop objects
|
||||
|
||||
**When NOT to use:**
|
||||
- Props change frequently
|
||||
- Component is already fast
|
||||
- Premature optimization
|
||||
|
||||
### useMemo
|
||||
|
||||
Memoize computed values:
|
||||
|
||||
```typescript
|
||||
const SortedList = ({ items, filter }: Props) => {
|
||||
// Without memoization - runs every render
|
||||
const filteredItems = items.filter(item => item.type === filter)
|
||||
const sortedItems = filteredItems.sort((a, b) => a.name.localeCompare(b.name))
|
||||
|
||||
// With memoization - only runs when dependencies change
|
||||
const sortedFilteredItems = useMemo(() => {
|
||||
const filtered = items.filter(item => item.type === filter)
|
||||
return filtered.sort((a, b) => a.name.localeCompare(b.name))
|
||||
}, [items, filter])
|
||||
|
||||
return (
|
||||
<ul>
|
||||
{sortedFilteredItems.map(item => (
|
||||
<li key={item.id}>{item.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**When to use:**
|
||||
- Expensive calculations (sorting, filtering large arrays)
|
||||
- Creating stable object references
|
||||
- Computed values used as dependencies
|
||||
|
||||
### useCallback
|
||||
|
||||
Memoize callback functions:
|
||||
|
||||
```typescript
|
||||
const Parent = () => {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
// Without useCallback - new function every render
|
||||
const handleClick = () => {
|
||||
setCount(c => c + 1)
|
||||
}
|
||||
|
||||
// With useCallback - stable function reference
|
||||
const handleClickMemo = useCallback(() => {
|
||||
setCount(c => c + 1)
|
||||
}, [])
|
||||
|
||||
return <MemoizedChild onClick={handleClickMemo} />
|
||||
}
|
||||
|
||||
const MemoizedChild = memo(({ onClick }: Props) => {
|
||||
return <button onClick={onClick}>Click</button>
|
||||
})
|
||||
```
|
||||
|
||||
**When to use:**
|
||||
- Passing callbacks to memoized components
|
||||
- Callback is used in dependency array
|
||||
- Callback is expensive to create
|
||||
|
||||
## React Compiler (Automatic Optimization)
|
||||
|
||||
### Enable React Compiler
|
||||
|
||||
React 19 can automatically optimize without manual memoization:
|
||||
|
||||
```javascript
|
||||
// babel.config.js
|
||||
module.exports = {
|
||||
plugins: [
|
||||
['react-compiler', {
|
||||
compilationMode: 'all', // Optimize all components
|
||||
}]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Compilation Modes
|
||||
|
||||
```javascript
|
||||
{
|
||||
compilationMode: 'annotation', // Only components with "use memo"
|
||||
compilationMode: 'all', // All components (recommended)
|
||||
compilationMode: 'infer' // Based on component complexity
|
||||
}
|
||||
```
|
||||
|
||||
### Directives
|
||||
|
||||
```typescript
|
||||
// Force memoization
|
||||
'use memo'
|
||||
const Component = ({ data }: Props) => {
|
||||
return <div>{data}</div>
|
||||
}
|
||||
|
||||
// Prevent memoization
|
||||
'use no memo'
|
||||
const SimpleComponent = ({ text }: Props) => {
|
||||
return <span>{text}</span>
|
||||
}
|
||||
```
|
||||
|
||||
## State Management Optimization
|
||||
|
||||
### State Colocation
|
||||
|
||||
Keep state as close as possible to where it's used:
|
||||
|
||||
```typescript
|
||||
// Bad - state too high
|
||||
const App = () => {
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Content />
|
||||
<Modal show={showModal} onClose={() => setShowModal(false)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// Good - state colocated
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Content />
|
||||
<ModalContainer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ModalContainer = () => {
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
|
||||
return <Modal show={showModal} onClose={() => setShowModal(false)} />
|
||||
}
|
||||
```
|
||||
|
||||
### Split Context
|
||||
|
||||
Avoid unnecessary re-renders by splitting context:
|
||||
|
||||
```typescript
|
||||
// Bad - single context causes all consumers to re-render
|
||||
const AppContext = createContext({ user, theme, settings })
|
||||
|
||||
// Good - split into separate contexts
|
||||
const UserContext = createContext(user)
|
||||
const ThemeContext = createContext(theme)
|
||||
const SettingsContext = createContext(settings)
|
||||
```
|
||||
|
||||
### Context with useMemo
|
||||
|
||||
```typescript
|
||||
const ThemeProvider = ({ children }: Props) => {
|
||||
const [theme, setTheme] = useState('light')
|
||||
|
||||
// Memoize context value to prevent unnecessary re-renders
|
||||
const value = useMemo(() => ({
|
||||
theme,
|
||||
setTheme
|
||||
}), [theme])
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={value}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Code Splitting & Lazy Loading
|
||||
|
||||
### React.lazy
|
||||
|
||||
Split components into separate bundles:
|
||||
|
||||
```typescript
|
||||
import { lazy, Suspense } from 'react'
|
||||
|
||||
// Lazy load components
|
||||
const Dashboard = lazy(() => import('./Dashboard'))
|
||||
const Settings = lazy(() => import('./Settings'))
|
||||
const Profile = lazy(() => import('./Profile'))
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Routes>
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route path="/profile" element={<Profile />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Route-based Splitting
|
||||
|
||||
```typescript
|
||||
// App.tsx
|
||||
const routes = [
|
||||
{ path: '/', component: lazy(() => import('./pages/Home')) },
|
||||
{ path: '/about', component: lazy(() => import('./pages/About')) },
|
||||
{ path: '/products', component: lazy(() => import('./pages/Products')) },
|
||||
]
|
||||
|
||||
const App = () => (
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Routes>
|
||||
{routes.map(({ path, component: Component }) => (
|
||||
<Route key={path} path={path} element={<Component />} />
|
||||
))}
|
||||
</Routes>
|
||||
</Suspense>
|
||||
)
|
||||
```
|
||||
|
||||
### Component-based Splitting
|
||||
|
||||
```typescript
|
||||
// Split expensive components
|
||||
const HeavyChart = lazy(() => import('./HeavyChart'))
|
||||
|
||||
const Dashboard = () => {
|
||||
const [showChart, setShowChart] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setShowChart(true)}>
|
||||
Load Chart
|
||||
</button>
|
||||
{showChart && (
|
||||
<Suspense fallback={<ChartSkeleton />}>
|
||||
<HeavyChart />
|
||||
</Suspense>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## List Rendering Optimization
|
||||
|
||||
### Keys
|
||||
|
||||
Always use stable, unique keys:
|
||||
|
||||
```typescript
|
||||
// Bad - index as key (causes issues on reorder/insert)
|
||||
{items.map((item, index) => (
|
||||
<Item key={index} data={item} />
|
||||
))}
|
||||
|
||||
// Good - unique ID as key
|
||||
{items.map(item => (
|
||||
<Item key={item.id} data={item} />
|
||||
))}
|
||||
|
||||
// For static lists without IDs
|
||||
{items.map(item => (
|
||||
<Item key={`${item.name}-${item.category}`} data={item} />
|
||||
))}
|
||||
```
|
||||
|
||||
### Virtualization
|
||||
|
||||
For long lists, render only visible items:
|
||||
|
||||
```typescript
|
||||
import { useVirtualizer } from '@tanstack/react-virtual'
|
||||
|
||||
const VirtualList = ({ items }: { items: Item[] }) => {
|
||||
const parentRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: items.length,
|
||||
getScrollElement: () => parentRef.current,
|
||||
estimateSize: () => 50, // Estimated item height
|
||||
overscan: 5 // Render 5 extra items above/below viewport
|
||||
})
|
||||
|
||||
return (
|
||||
<div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
|
||||
<div
|
||||
style={{
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
{virtualizer.getVirtualItems().map(virtualItem => (
|
||||
<div
|
||||
key={virtualItem.key}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: `${virtualItem.size}px`,
|
||||
transform: `translateY(${virtualItem.start}px)`
|
||||
}}
|
||||
>
|
||||
<Item data={items[virtualItem.index]} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Pagination
|
||||
|
||||
```typescript
|
||||
const PaginatedList = ({ items }: Props) => {
|
||||
const [page, setPage] = useState(1)
|
||||
const itemsPerPage = 20
|
||||
|
||||
const paginatedItems = useMemo(() => {
|
||||
const start = (page - 1) * itemsPerPage
|
||||
const end = start + itemsPerPage
|
||||
return items.slice(start, end)
|
||||
}, [items, page, itemsPerPage])
|
||||
|
||||
return (
|
||||
<>
|
||||
{paginatedItems.map(item => (
|
||||
<Item key={item.id} data={item} />
|
||||
))}
|
||||
<Pagination
|
||||
page={page}
|
||||
total={Math.ceil(items.length / itemsPerPage)}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Transitions & Concurrent Features
|
||||
|
||||
### useTransition
|
||||
|
||||
Keep UI responsive during expensive updates:
|
||||
|
||||
```typescript
|
||||
const SearchPage = () => {
|
||||
const [query, setQuery] = useState('')
|
||||
const [results, setResults] = useState([])
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setQuery(value) // Urgent - update input immediately
|
||||
|
||||
// Non-urgent - can be interrupted
|
||||
startTransition(() => {
|
||||
const filtered = expensiveFilter(items, value)
|
||||
setResults(filtered)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<input value={query} onChange={e => handleSearch(e.target.value)} />
|
||||
{isPending && <Spinner />}
|
||||
<ResultsList results={results} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### useDeferredValue
|
||||
|
||||
Defer non-urgent renders:
|
||||
|
||||
```typescript
|
||||
const SearchPage = () => {
|
||||
const [query, setQuery] = useState('')
|
||||
const deferredQuery = useDeferredValue(query)
|
||||
|
||||
// Input updates immediately
|
||||
// Results update with deferred value (can be interrupted)
|
||||
const results = useMemo(() => {
|
||||
return expensiveFilter(items, deferredQuery)
|
||||
}, [deferredQuery])
|
||||
|
||||
return (
|
||||
<>
|
||||
<input value={query} onChange={e => setQuery(e.target.value)} />
|
||||
<ResultsList results={results} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Image & Asset Optimization
|
||||
|
||||
### Lazy Load Images
|
||||
|
||||
```typescript
|
||||
const LazyImage = ({ src, alt }: Props) => {
|
||||
const [isLoaded, setIsLoaded] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{!isLoaded && <ImageSkeleton />}
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
loading="lazy" // Native lazy loading
|
||||
onLoad={() => setIsLoaded(true)}
|
||||
className={isLoaded ? 'opacity-100' : 'opacity-0'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Next.js Image Component
|
||||
|
||||
```typescript
|
||||
import Image from 'next/image'
|
||||
|
||||
const OptimizedImage = () => (
|
||||
<Image
|
||||
src="/hero.jpg"
|
||||
alt="Hero"
|
||||
width={800}
|
||||
height={600}
|
||||
priority // Load immediately for above-fold images
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/jpeg;base64,..."
|
||||
/>
|
||||
)
|
||||
```
|
||||
|
||||
## Bundle Size Optimization
|
||||
|
||||
### Tree Shaking
|
||||
|
||||
Import only what you need:
|
||||
|
||||
```typescript
|
||||
// Bad - imports entire library
|
||||
import _ from 'lodash'
|
||||
|
||||
// Good - import only needed functions
|
||||
import debounce from 'lodash/debounce'
|
||||
import throttle from 'lodash/throttle'
|
||||
|
||||
// Even better - use native methods when possible
|
||||
const debounce = (fn, delay) => {
|
||||
let timeoutId
|
||||
return (...args) => {
|
||||
clearTimeout(timeoutId)
|
||||
timeoutId = setTimeout(() => fn(...args), delay)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Analyze Bundle
|
||||
|
||||
```bash
|
||||
# Next.js
|
||||
ANALYZE=true npm run build
|
||||
|
||||
# Create React App
|
||||
npm install --save-dev webpack-bundle-analyzer
|
||||
```
|
||||
|
||||
### Dynamic Imports
|
||||
|
||||
```typescript
|
||||
// Load library only when needed
|
||||
const handleExport = async () => {
|
||||
const { jsPDF } = await import('jspdf')
|
||||
const doc = new jsPDF()
|
||||
doc.save('report.pdf')
|
||||
}
|
||||
```
|
||||
|
||||
## Common Performance Pitfalls
|
||||
|
||||
### 1. Inline Object Creation
|
||||
|
||||
```typescript
|
||||
// Bad - new object every render
|
||||
<Component style={{ margin: 10 }} />
|
||||
|
||||
// Good - stable reference
|
||||
const style = { margin: 10 }
|
||||
<Component style={style} />
|
||||
|
||||
// Or use useMemo
|
||||
const style = useMemo(() => ({ margin: 10 }), [])
|
||||
```
|
||||
|
||||
### 2. Inline Functions
|
||||
|
||||
```typescript
|
||||
// Bad - new function every render (if child is memoized)
|
||||
<MemoizedChild onClick={() => handleClick(id)} />
|
||||
|
||||
// Good
|
||||
const handleClickMemo = useCallback(() => handleClick(id), [id])
|
||||
<MemoizedChild onClick={handleClickMemo} />
|
||||
```
|
||||
|
||||
### 3. Spreading Props
|
||||
|
||||
```typescript
|
||||
// Bad - causes re-renders even when props unchanged
|
||||
<Component {...props} />
|
||||
|
||||
// Good - pass only needed props
|
||||
<Component value={props.value} onChange={props.onChange} />
|
||||
```
|
||||
|
||||
### 4. Large Context
|
||||
|
||||
```typescript
|
||||
// Bad - everything re-renders on any state change
|
||||
const AppContext = createContext({ user, theme, cart, settings, ... })
|
||||
|
||||
// Good - split into focused contexts
|
||||
const UserContext = createContext(user)
|
||||
const ThemeContext = createContext(theme)
|
||||
const CartContext = createContext(cart)
|
||||
```
|
||||
|
||||
## Performance Checklist
|
||||
|
||||
- [ ] Measure before optimizing (use Profiler)
|
||||
- [ ] Use React DevTools to identify slow components
|
||||
- [ ] Implement code splitting for large routes
|
||||
- [ ] Lazy load below-the-fold content
|
||||
- [ ] Virtualize long lists
|
||||
- [ ] Memoize expensive calculations
|
||||
- [ ] Split large contexts
|
||||
- [ ] Colocate state close to usage
|
||||
- [ ] Use transitions for non-urgent updates
|
||||
- [ ] Optimize images and assets
|
||||
- [ ] Analyze and minimize bundle size
|
||||
- [ ] Remove console.logs in production
|
||||
- [ ] Use production build for testing
|
||||
- [ ] Monitor real-world performance metrics
|
||||
|
||||
## References
|
||||
|
||||
- React Performance: https://react.dev/learn/render-and-commit
|
||||
- React Profiler: https://react.dev/reference/react/Profiler
|
||||
- React Compiler: https://react.dev/reference/react-compiler
|
||||
- Web Vitals: https://web.dev/vitals/
|
||||
|
||||
656
.claude/skills/react/references/server-components.md
Normal file
656
.claude/skills/react/references/server-components.md
Normal file
@@ -0,0 +1,656 @@
|
||||
# React Server Components & Server Functions
|
||||
|
||||
## Overview
|
||||
|
||||
React Server Components (RSC) allow components to render on the server, improving performance and enabling direct data access. Server Functions allow client components to call server-side functions.
|
||||
|
||||
## Server Components
|
||||
|
||||
### What are Server Components?
|
||||
|
||||
Components that run **only on the server**:
|
||||
- Can access databases directly
|
||||
- Zero bundle size (code stays on server)
|
||||
- Better performance (less JavaScript to client)
|
||||
- Automatic code splitting
|
||||
|
||||
### Creating Server Components
|
||||
|
||||
```typescript
|
||||
// app/products/page.tsx
|
||||
// Server Component by default in App Router
|
||||
|
||||
import { db } from '@/lib/db'
|
||||
|
||||
const ProductsPage = async () => {
|
||||
// Direct database access
|
||||
const products = await db.product.findMany({
|
||||
where: { active: true },
|
||||
include: { category: true }
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Products</h1>
|
||||
{products.map(product => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductsPage
|
||||
```
|
||||
|
||||
### Server Component Rules
|
||||
|
||||
**Can do:**
|
||||
- Access databases and APIs directly
|
||||
- Use server-only modules (fs, path, etc.)
|
||||
- Keep secrets secure (API keys, tokens)
|
||||
- Reduce client bundle size
|
||||
- Use async/await at top level
|
||||
|
||||
**Cannot do:**
|
||||
- Use hooks (useState, useEffect, etc.)
|
||||
- Use browser APIs (window, document)
|
||||
- Attach event handlers (onClick, etc.)
|
||||
- Use Context
|
||||
|
||||
### Mixing Server and Client Components
|
||||
|
||||
```typescript
|
||||
// Server Component (default)
|
||||
const Page = async () => {
|
||||
const data = await fetchData()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ServerComponent data={data} />
|
||||
{/* Client component for interactivity */}
|
||||
<ClientComponent initialData={data} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Client Component
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
|
||||
const ClientComponent = ({ initialData }) => {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
return (
|
||||
<button onClick={() => setCount(c => c + 1)}>
|
||||
{count}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Server Component Patterns
|
||||
|
||||
#### Data Fetching
|
||||
```typescript
|
||||
// app/user/[id]/page.tsx
|
||||
interface PageProps {
|
||||
params: { id: string }
|
||||
}
|
||||
|
||||
const UserPage = async ({ params }: PageProps) => {
|
||||
const user = await db.user.findUnique({
|
||||
where: { id: params.id }
|
||||
})
|
||||
|
||||
if (!user) {
|
||||
notFound() // Next.js 404
|
||||
}
|
||||
|
||||
return <UserProfile user={user} />
|
||||
}
|
||||
```
|
||||
|
||||
#### Parallel Data Fetching
|
||||
```typescript
|
||||
const DashboardPage = async () => {
|
||||
// Fetch in parallel
|
||||
const [user, orders, stats] = await Promise.all([
|
||||
fetchUser(),
|
||||
fetchOrders(),
|
||||
fetchStats()
|
||||
])
|
||||
|
||||
return (
|
||||
<>
|
||||
<UserHeader user={user} />
|
||||
<OrdersList orders={orders} />
|
||||
<StatsWidget stats={stats} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### Streaming with Suspense
|
||||
```typescript
|
||||
const Page = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Suspense fallback={<ProductsSkeleton />}>
|
||||
<Products />
|
||||
</Suspense>
|
||||
<Suspense fallback={<ReviewsSkeleton />}>
|
||||
<Reviews />
|
||||
</Suspense>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const Products = async () => {
|
||||
const products = await fetchProducts() // Slow query
|
||||
return <ProductsList products={products} />
|
||||
}
|
||||
```
|
||||
|
||||
## Server Functions (Server Actions)
|
||||
|
||||
### What are Server Functions?
|
||||
|
||||
Functions that run on the server but can be called from client components:
|
||||
- Marked with `'use server'` directive
|
||||
- Can mutate data
|
||||
- Integrated with forms
|
||||
- Type-safe with TypeScript
|
||||
|
||||
### Creating Server Functions
|
||||
|
||||
#### File-level directive
|
||||
```typescript
|
||||
// app/actions.ts
|
||||
'use server'
|
||||
|
||||
import { db } from '@/lib/db'
|
||||
import { revalidatePath } from 'next/cache'
|
||||
|
||||
export async function createProduct(formData: FormData) {
|
||||
const name = formData.get('name') as string
|
||||
const price = Number(formData.get('price'))
|
||||
|
||||
const product = await db.product.create({
|
||||
data: { name, price }
|
||||
})
|
||||
|
||||
revalidatePath('/products')
|
||||
return product
|
||||
}
|
||||
|
||||
export async function deleteProduct(id: string) {
|
||||
await db.product.delete({ where: { id } })
|
||||
revalidatePath('/products')
|
||||
}
|
||||
```
|
||||
|
||||
#### Function-level directive
|
||||
```typescript
|
||||
// Inside a Server Component
|
||||
const MyComponent = async () => {
|
||||
async function handleSubmit(formData: FormData) {
|
||||
'use server'
|
||||
const email = formData.get('email') as string
|
||||
await saveEmail(email)
|
||||
}
|
||||
|
||||
return <form action={handleSubmit}>...</form>
|
||||
}
|
||||
```
|
||||
|
||||
### Using Server Functions
|
||||
|
||||
#### With Forms
|
||||
```typescript
|
||||
'use client'
|
||||
|
||||
import { createProduct } from './actions'
|
||||
|
||||
const ProductForm = () => {
|
||||
return (
|
||||
<form action={createProduct}>
|
||||
<input name="name" required />
|
||||
<input name="price" type="number" required />
|
||||
<button type="submit">Create</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### With useActionState
|
||||
```typescript
|
||||
'use client'
|
||||
|
||||
import { useActionState } from 'react'
|
||||
import { createProduct } from './actions'
|
||||
|
||||
type FormState = {
|
||||
message: string
|
||||
success: boolean
|
||||
} | null
|
||||
|
||||
const ProductForm = () => {
|
||||
const [state, formAction, isPending] = useActionState<FormState>(
|
||||
async (previousState, formData: FormData) => {
|
||||
try {
|
||||
await createProduct(formData)
|
||||
return { message: 'Product created!', success: true }
|
||||
} catch (error) {
|
||||
return { message: 'Failed to create product', success: false }
|
||||
}
|
||||
},
|
||||
null
|
||||
)
|
||||
|
||||
return (
|
||||
<form action={formAction}>
|
||||
<input name="name" required />
|
||||
<input name="price" type="number" required />
|
||||
<button disabled={isPending}>
|
||||
{isPending ? 'Creating...' : 'Create'}
|
||||
</button>
|
||||
{state?.message && (
|
||||
<p className={state.success ? 'text-green-600' : 'text-red-600'}>
|
||||
{state.message}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### Programmatic Invocation
|
||||
```typescript
|
||||
'use client'
|
||||
|
||||
import { deleteProduct } from './actions'
|
||||
|
||||
const DeleteButton = ({ productId }: { productId: string }) => {
|
||||
const [isPending, setIsPending] = useState(false)
|
||||
|
||||
const handleDelete = async () => {
|
||||
setIsPending(true)
|
||||
try {
|
||||
await deleteProduct(productId)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsPending(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<button onClick={handleDelete} disabled={isPending}>
|
||||
{isPending ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Server Function Patterns
|
||||
|
||||
#### Validation with Zod
|
||||
```typescript
|
||||
'use server'
|
||||
|
||||
import { z } from 'zod'
|
||||
|
||||
const ProductSchema = z.object({
|
||||
name: z.string().min(3),
|
||||
price: z.number().positive(),
|
||||
description: z.string().optional()
|
||||
})
|
||||
|
||||
export async function createProduct(formData: FormData) {
|
||||
const rawData = {
|
||||
name: formData.get('name'),
|
||||
price: Number(formData.get('price')),
|
||||
description: formData.get('description')
|
||||
}
|
||||
|
||||
// Validate
|
||||
const result = ProductSchema.safeParse(rawData)
|
||||
if (!result.success) {
|
||||
return {
|
||||
success: false,
|
||||
errors: result.error.flatten().fieldErrors
|
||||
}
|
||||
}
|
||||
|
||||
// Create product
|
||||
const product = await db.product.create({
|
||||
data: result.data
|
||||
})
|
||||
|
||||
revalidatePath('/products')
|
||||
return { success: true, product }
|
||||
}
|
||||
```
|
||||
|
||||
#### Authentication Check
|
||||
```typescript
|
||||
'use server'
|
||||
|
||||
import { auth } from '@/lib/auth'
|
||||
import { redirect } from 'next/navigation'
|
||||
|
||||
export async function createOrder(formData: FormData) {
|
||||
const session = await auth()
|
||||
|
||||
if (!session?.user) {
|
||||
redirect('/login')
|
||||
}
|
||||
|
||||
const order = await db.order.create({
|
||||
data: {
|
||||
userId: session.user.id,
|
||||
// ... other fields
|
||||
}
|
||||
})
|
||||
|
||||
return order
|
||||
}
|
||||
```
|
||||
|
||||
#### Error Handling
|
||||
```typescript
|
||||
'use server'
|
||||
|
||||
export async function updateProfile(formData: FormData) {
|
||||
try {
|
||||
const userId = await getCurrentUserId()
|
||||
|
||||
const profile = await db.user.update({
|
||||
where: { id: userId },
|
||||
data: {
|
||||
name: formData.get('name') as string,
|
||||
bio: formData.get('bio') as string
|
||||
}
|
||||
})
|
||||
|
||||
revalidatePath('/profile')
|
||||
return { success: true, profile }
|
||||
} catch (error) {
|
||||
console.error('Failed to update profile:', error)
|
||||
return {
|
||||
success: false,
|
||||
error: 'Failed to update profile. Please try again.'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Optimistic Updates
|
||||
```typescript
|
||||
'use client'
|
||||
|
||||
import { useOptimistic } from 'react'
|
||||
import { likePost } from './actions'
|
||||
|
||||
const Post = ({ post }: { post: Post }) => {
|
||||
const [optimisticLikes, addOptimisticLike] = useOptimistic(
|
||||
post.likes,
|
||||
(currentLikes) => currentLikes + 1
|
||||
)
|
||||
|
||||
const handleLike = async () => {
|
||||
addOptimisticLike(null)
|
||||
await likePost(post.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>{post.content}</p>
|
||||
<button onClick={handleLike}>
|
||||
❤️ {optimisticLikes}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Data Mutations & Revalidation
|
||||
|
||||
### revalidatePath
|
||||
Invalidate cached data for a path:
|
||||
|
||||
```typescript
|
||||
'use server'
|
||||
|
||||
import { revalidatePath } from 'next/cache'
|
||||
|
||||
export async function createPost(formData: FormData) {
|
||||
await db.post.create({ data: {...} })
|
||||
|
||||
// Revalidate the posts page
|
||||
revalidatePath('/posts')
|
||||
|
||||
// Revalidate with layout
|
||||
revalidatePath('/posts', 'layout')
|
||||
}
|
||||
```
|
||||
|
||||
### revalidateTag
|
||||
Invalidate cached data by tag:
|
||||
|
||||
```typescript
|
||||
'use server'
|
||||
|
||||
import { revalidateTag } from 'next/cache'
|
||||
|
||||
export async function updateProduct(id: string, data: ProductData) {
|
||||
await db.product.update({ where: { id }, data })
|
||||
|
||||
// Revalidate all queries tagged with 'products'
|
||||
revalidateTag('products')
|
||||
}
|
||||
```
|
||||
|
||||
### redirect
|
||||
Redirect after mutation:
|
||||
|
||||
```typescript
|
||||
'use server'
|
||||
|
||||
import { redirect } from 'next/navigation'
|
||||
|
||||
export async function createPost(formData: FormData) {
|
||||
const post = await db.post.create({ data: {...} })
|
||||
|
||||
// Redirect to the new post
|
||||
redirect(`/posts/${post.id}`)
|
||||
}
|
||||
```
|
||||
|
||||
## Caching with Server Components
|
||||
|
||||
### cache Function
|
||||
Deduplicate requests within a render:
|
||||
|
||||
```typescript
|
||||
import { cache } from 'react'
|
||||
|
||||
export const getUser = cache(async (id: string) => {
|
||||
return await db.user.findUnique({ where: { id } })
|
||||
})
|
||||
|
||||
// Called multiple times but only fetches once per render
|
||||
const Page = async () => {
|
||||
const user1 = await getUser('123')
|
||||
const user2 = await getUser('123') // Uses cached result
|
||||
|
||||
return <div>...</div>
|
||||
}
|
||||
```
|
||||
|
||||
### Next.js fetch Caching
|
||||
```typescript
|
||||
// Cached by default
|
||||
const data = await fetch('https://api.example.com/data')
|
||||
|
||||
// Revalidate every 60 seconds
|
||||
const data = await fetch('https://api.example.com/data', {
|
||||
next: { revalidate: 60 }
|
||||
})
|
||||
|
||||
// Never cache
|
||||
const data = await fetch('https://api.example.com/data', {
|
||||
cache: 'no-store'
|
||||
})
|
||||
|
||||
// Tag for revalidation
|
||||
const data = await fetch('https://api.example.com/data', {
|
||||
next: { tags: ['products'] }
|
||||
})
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Component Placement
|
||||
- Keep interactive components client-side
|
||||
- Use server components for data fetching
|
||||
- Place 'use client' as deep as possible in tree
|
||||
|
||||
### 2. Data Fetching
|
||||
- Fetch in parallel when possible
|
||||
- Use Suspense for streaming
|
||||
- Cache expensive operations
|
||||
|
||||
### 3. Server Functions
|
||||
- Validate all inputs
|
||||
- Check authentication/authorization
|
||||
- Handle errors gracefully
|
||||
- Return serializable data only
|
||||
|
||||
### 4. Performance
|
||||
- Minimize client JavaScript
|
||||
- Use streaming for slow queries
|
||||
- Implement proper caching
|
||||
- Optimize database queries
|
||||
|
||||
### 5. Security
|
||||
- Never expose secrets to client
|
||||
- Validate server function inputs
|
||||
- Use environment variables
|
||||
- Implement rate limiting
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Layout with Dynamic Data
|
||||
```typescript
|
||||
// app/layout.tsx
|
||||
const RootLayout = async ({ children }: { children: React.ReactNode }) => {
|
||||
const user = await getCurrentUser()
|
||||
|
||||
return (
|
||||
<html>
|
||||
<body>
|
||||
<Header user={user} />
|
||||
{children}
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Loading States
|
||||
```typescript
|
||||
// app/products/loading.tsx
|
||||
export default function Loading() {
|
||||
return <ProductsSkeleton />
|
||||
}
|
||||
|
||||
// app/products/page.tsx
|
||||
const ProductsPage = async () => {
|
||||
const products = await fetchProducts()
|
||||
return <ProductsList products={products} />
|
||||
}
|
||||
```
|
||||
|
||||
### Error Boundaries
|
||||
```typescript
|
||||
// app/products/error.tsx
|
||||
'use client'
|
||||
|
||||
export default function Error({
|
||||
error,
|
||||
reset
|
||||
}: {
|
||||
error: Error
|
||||
reset: () => void
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<h2>Something went wrong!</h2>
|
||||
<p>{error.message}</p>
|
||||
<button onClick={reset}>Try again</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Search with Server Functions
|
||||
```typescript
|
||||
'use client'
|
||||
|
||||
import { searchProducts } from './actions'
|
||||
import { useDeferredValue, useState, useEffect } from 'react'
|
||||
|
||||
const SearchPage = () => {
|
||||
const [query, setQuery] = useState('')
|
||||
const [results, setResults] = useState([])
|
||||
const deferredQuery = useDeferredValue(query)
|
||||
|
||||
useEffect(() => {
|
||||
if (deferredQuery) {
|
||||
searchProducts(deferredQuery).then(setResults)
|
||||
}
|
||||
}, [deferredQuery])
|
||||
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
/>
|
||||
<ResultsList results={results} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
1. **"Cannot use hooks in Server Component"**
|
||||
- Add 'use client' directive
|
||||
- Move state logic to client component
|
||||
|
||||
2. **"Functions cannot be passed to Client Components"**
|
||||
- Use Server Functions instead
|
||||
- Pass data, not functions
|
||||
|
||||
3. **Hydration mismatches**
|
||||
- Ensure server and client render same HTML
|
||||
- Use useEffect for browser-only code
|
||||
|
||||
4. **Slow initial load**
|
||||
- Implement Suspense boundaries
|
||||
- Use streaming rendering
|
||||
- Optimize database queries
|
||||
|
||||
## References
|
||||
|
||||
- React Server Components: https://react.dev/reference/rsc/server-components
|
||||
- Server Functions: https://react.dev/reference/rsc/server-functions
|
||||
- Next.js App Router: https://nextjs.org/docs/app
|
||||
|
||||
Reference in New Issue
Block a user