name: react description: This skill should be used when working with React 19, including hooks, components, server components, concurrent features, and React DOM APIs. Provides comprehensive knowledge of React patterns, best practices, and modern React architecture.
This skill provides comprehensive knowledge and patterns for working with React 19 effectively in modern applications.
Use this skill when:
React 19 introduces significant improvements:
Use functional components with hooks:
// Functional component with props interface
interface ButtonProps {
label: string
onClick: () => void
variant?: 'primary' | 'secondary'
}
const Button = ({ label, onClick, variant = 'primary' }: ButtonProps) => {
return (
<button
onClick={onClick}
className={`btn btn-${variant}`}
>
{label}
</button>
)
}
Key Principles:
Manage local component state:
const [count, setCount] = useState<number>(0)
const [user, setUser] = useState<User | null>(null)
// Named return variables pattern
const handleIncrement = () => {
setCount(prev => prev + 1) // Functional update
}
// Update object state immutably
setUser(prev => prev ? { ...prev, name: 'New Name' } : null)
Manage complex state with reducer pattern:
type State = { count: number; status: 'idle' | 'loading' }
type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'setStatus'; status: State['status'] }
const reducer = (state: State, action: Action): State => {
switch (action.type) {
case 'increment':
return { ...state, count: state.count + 1 }
case 'decrement':
return { ...state, count: state.count - 1 }
case 'setStatus':
return { ...state, status: action.status }
default:
return state
}
}
const [state, dispatch] = useReducer(reducer, { count: 0, status: 'idle' })
Handle form actions with pending states (React 19):
const [state, formAction, isPending] = useActionState(
async (previousState: FormState, formData: FormData) => {
const name = formData.get('name') as string
// Server action or async operation
const result = await saveUser({ name })
return { success: true, data: result }
},
{ success: false, data: null }
)
return (
<form action={formAction}>
<input name="name" />
<button disabled={isPending}>
{isPending ? 'Saving...' : 'Save'}
</button>
</form>
)
Run side effects after render:
// Named return variables preferred
useEffect(() => {
const controller = new AbortController()
const fetchData = async () => {
const response = await fetch('/api/data', {
signal: controller.signal
})
const data = await response.json()
setData(data)
}
fetchData()
// Cleanup function
return () => {
controller.abort()
}
}, [dependencies]) // Dependencies array
Key Points:
Run effects synchronously after DOM mutations but before paint:
useLayoutEffect(() => {
// Measure DOM nodes
const height = ref.current?.getBoundingClientRect().height
setHeight(height)
}, [])
Use when you need to:
Insert styles before any DOM reads (for CSS-in-JS libraries):
useInsertionEffect(() => {
const style = document.createElement('style')
style.textContent = '.my-class { color: red; }'
document.head.appendChild(style)
return () => {
document.head.removeChild(style)
}
}, [])
Memoize expensive calculations:
const expensiveValue = useMemo(() => {
return computeExpensiveValue(a, b)
}, [a, b])
When to use:
When NOT to use:
Memoize callback functions:
const handleClick = useCallback(() => {
console.log('Clicked', value)
}, [value])
// Pass to child that uses memo
<ChildComponent onClick={handleClick} />
Use when:
Store mutable values that don't trigger re-renders:
// DOM reference
const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => {
inputRef.current?.focus()
}, [])
// Mutable value storage
const countRef = useRef<number>(0)
countRef.current += 1 // Doesn't trigger re-render
Customize ref handle for parent components:
interface InputHandle {
focus: () => void
clear: () => void
}
const CustomInput = forwardRef<InputHandle, InputProps>((props, ref) => {
const inputRef = useRef<HTMLInputElement>(null)
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current?.focus()
},
clear: () => {
if (inputRef.current) {
inputRef.current.value = ''
}
}
}))
return <input ref={inputRef} {...props} />
})
Access context values:
// Create context
interface ThemeContext {
theme: 'light' | 'dark'
toggleTheme: () => void
}
const ThemeContext = createContext<ThemeContext | null>(null)
// Provider
const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
const [theme, setTheme] = useState<'light' | 'dark'>('light')
const toggleTheme = useCallback(() => {
setTheme(prev => prev === 'light' ? 'dark' : 'light')
}, [])
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
)
}
// Consumer
const ThemedButton = () => {
const context = useContext(ThemeContext)
if (!context) throw new Error('useTheme must be used within ThemeProvider')
const { theme, toggleTheme } = context
return (
<button onClick={toggleTheme}>
Current theme: {theme}
</button>
)
}
Mark state updates as non-urgent:
const [isPending, startTransition] = useTransition()
const handleTabChange = (newTab: string) => {
startTransition(() => {
setTab(newTab) // Non-urgent update
})
}
return (
<>
<button onClick={() => handleTabChange('profile')}>
Profile
</button>
{isPending && <Spinner />}
<TabContent tab={tab} />
</>
)
Use for:
Defer re-rendering for non-urgent updates:
const [query, setQuery] = useState('')
const deferredQuery = useDeferredValue(query)
// Use deferred value for expensive rendering
const results = useMemo(() => {
return searchResults(deferredQuery)
}, [deferredQuery])
return (
<>
<input value={query} onChange={e => setQuery(e.target.value)} />
<Results data={results} />
</>
)
Show optimistic state while async operation completes (React 19):
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage: string) => [
...state,
{ id: 'temp', text: newMessage, pending: true }
]
)
const handleSend = async (formData: FormData) => {
const message = formData.get('message') as string
// Show optimistic update immediately
addOptimisticMessage(message)
// Send to server
await sendMessage(message)
}
return (
<>
{optimisticMessages.map(msg => (
<div key={msg.id} className={msg.pending ? 'opacity-50' : ''}>
{msg.text}
</div>
))}
<form action={handleSend}>
<input name="message" />
<button>Send</button>
</form>
</>
)
Generate unique IDs for accessibility:
const id = useId()
return (
<>
<label htmlFor={id}>Name:</label>
<input id={id} type="text" />
</>
)
Subscribe to external stores:
const subscribe = (callback: () => void) => {
store.subscribe(callback)
return () => store.unsubscribe(callback)
}
const getSnapshot = () => store.getState()
const getServerSnapshot = () => store.getInitialState()
const state = useSyncExternalStore(
subscribe,
getSnapshot,
getServerSnapshot
)
Display custom label in React DevTools:
const useCustomHook = (value: string) => {
useDebugValue(value ? `Active: ${value}` : 'Inactive')
return value
}
Group elements without extra DOM nodes:
// Short syntax
<>
<ChildA />
<ChildB />
</>
// Full syntax (when you need key prop)
<Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</Fragment>
Show fallback while loading:
<Suspense fallback={<Loading />}>
<AsyncComponent />
</Suspense>
// With error boundary
<ErrorBoundary fallback={<Error />}>
<Suspense fallback={<Loading />}>
<AsyncComponent />
</Suspense>
</ErrorBoundary>
Enable additional checks in development:
<StrictMode>
<App />
</StrictMode>
StrictMode checks:
Measure rendering performance:
<Profiler id="App" onRender={onRender}>
<App />
</Profiler>
const onRender = (
id: string,
phase: 'mount' | 'update',
actualDuration: number,
baseDuration: number,
startTime: number,
commitTime: number
) => {
console.log(`${id} took ${actualDuration}ms`)
}
Prevent unnecessary re-renders:
const ExpensiveComponent = memo(({ data }: Props) => {
return <div>{data}</div>
}, (prevProps, nextProps) => {
// Return true if props are equal (skip render)
return prevProps.data === nextProps.data
})
Code-split components:
const Dashboard = lazy(() => import('./Dashboard'))
<Suspense fallback={<Loading />}>
<Dashboard />
</Suspense>
Mark updates as transitions imperatively:
startTransition(() => {
setTab('profile')
})
Cache function results per request:
const getUser = cache(async (id: string) => {
return await db.user.findUnique({ where: { id } })
})
Read context or promises in render:
// Read context
const theme = use(ThemeContext)
// Read promise (must be wrapped in Suspense)
const data = use(fetchDataPromise)
Components that run only on the server:
// app/page.tsx (Server Component by default)
const Page = async () => {
// Can fetch data directly
const posts = await db.post.findMany()
return (
<div>
{posts.map(post => (
<PostCard key={post.id} post={post} />
))}
</div>
)
}
export default Page
Benefits:
Functions that run on server, callable from client:
'use server'
export async function createPost(formData: FormData) {
const title = formData.get('title') as string
const content = formData.get('content') as string
const post = await db.post.create({
data: { title, content }
})
revalidatePath('/posts')
return post
}
Usage from client:
'use client'
import { createPost } from './actions'
const PostForm = () => {
const [state, formAction] = useActionState(createPost, null)
return (
<form action={formAction}>
<input name="title" />
<textarea name="content" />
<button>Create</button>
</form>
)
}
Mark file as client component:
'use client'
import { useState } from 'react'
// This component runs on client
export const Counter = () => {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}
Mark functions as server functions:
'use server'
export async function updateUser(userId: string, data: UserData) {
return await db.user.update({ where: { id: userId }, data })
}
Create root for client rendering (React 19):
import { createRoot } from 'react-dom/client'
const root = createRoot(document.getElementById('root')!)
root.render(<App />)
// Update root
root.render(<App newProp="value" />)
// Unmount
root.unmount()
Hydrate server-rendered HTML:
import { hydrateRoot } from 'react-dom/client'
hydrateRoot(document.getElementById('root')!, <App />)
Render children outside parent DOM hierarchy:
import { createPortal } from 'react-dom'
const Modal = ({ children }: { children: React.ReactNode }) => {
return createPortal(
<div className="modal">{children}</div>,
document.body
)
}
Force synchronous update:
import { flushSync } from 'react-dom'
flushSync(() => {
setCount(1)
})
// DOM is updated synchronously
const handleSubmit = async (formData: FormData) => {
'use server'
const email = formData.get('email')
await saveEmail(email)
}
<form action={handleSubmit}>
<input name="email" type="email" />
<button>Subscribe</button>
</form>
import { useFormStatus } from 'react-dom'
const SubmitButton = () => {
const { pending } = useFormStatus()
return (
<button disabled={pending}>
{pending ? 'Submitting...' : 'Submit'}
</button>
)
}
Configure React Compiler in babel or bundler config:
// babel.config.js
module.exports = {
plugins: [
['react-compiler', {
compilationMode: 'annotation', // or 'all'
panicThreshold: 'all_errors',
}]
]
}
Force memoization of component:
'use memo'
const ExpensiveComponent = ({ data }: Props) => {
const processed = expensiveComputation(data)
return <div>{processed}</div>
}
Prevent automatic memoization:
'use no memo'
const SimpleComponent = ({ text }: Props) => {
return <div>{text}</div>
}
interface TabsProps {
children: React.ReactNode
defaultValue: string
}
const TabsContext = createContext<{
value: string
setValue: (v: string) => void
} | null>(null)
const Tabs = ({ children, defaultValue }: TabsProps) => {
const [value, setValue] = useState(defaultValue)
return (
<TabsContext.Provider value={{ value, setValue }}>
{children}
</TabsContext.Provider>
)
}
const TabsList = ({ children }: { children: React.ReactNode }) => (
<div role="tablist">{children}</div>
)
const TabsTrigger = ({ value, children }: { value: string, children: React.ReactNode }) => {
const context = useContext(TabsContext)
if (!context) throw new Error('TabsTrigger must be used within Tabs')
return (
<button
role="tab"
aria-selected={context.value === value}
onClick={() => context.setValue(value)}
>
{children}
</button>
)
}
const TabsContent = ({ value, children }: { value: string, children: React.ReactNode }) => {
const context = useContext(TabsContext)
if (!context) throw new Error('TabsContent must be used within Tabs')
if (context.value !== value) return null
return <div role="tabpanel">{children}</div>
}
// Usage
<Tabs defaultValue="profile">
<TabsList>
<TabsTrigger value="profile">Profile</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="profile">Profile content</TabsContent>
<TabsContent value="settings">Settings content</TabsContent>
</Tabs>
interface DataFetcherProps<T> {
url: string
children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode
}
const DataFetcher = <T,>({ url, children }: DataFetcherProps<T>) => {
const [data, setData] = useState<T | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<Error | null>(null)
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false))
}, [url])
return <>{children(data, loading, error)}</>
}
// Usage
<DataFetcher<User> url="/api/user">
{(user, loading, error) => {
if (loading) return <Spinner />
if (error) return <Error error={error} />
if (!user) return null
return <UserProfile user={user} />
}}
</DataFetcher>
const useLocalStorage = <T,>(key: string, initialValue: T) => {
const [storedValue, setStoredValue] = useState<T>(() => {
try {
const item = window.localStorage.getItem(key)
return item ? JSON.parse(item) : initialValue
} catch (error) {
console.error(error)
return initialValue
}
})
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))
} catch (error) {
console.error(error)
}
}, [key, storedValue])
return [storedValue, setValue] as const
}