react-19

React 19 Best Practices

Overview

Feature	Status
Server Components	Stable
useActionState	New (replaces useFormState)
useFormStatus	Enhanced
use() hook	New
Ref as prop	No forwardRef needed
Document Metadata	Native support

---

Component Patterns

✅ DO: Use function components with TypeScript

interface UserCardProps {
  name: string
  email: string
  onEdit?: () => void
}

export function UserCard({ name, email, onEdit }: UserCardProps) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{email}</p>
      {onEdit && <button onClick={onEdit}>Edit</button>}
    </div>
  )
}

✅ DO: Use early returns

export function UserProfile({ user }: { user: User | null }) {
  if (!user) return null
  if (user.banned) return <BannedMessage />
  
  return <ProfileCard user={user} />
}

❌ DON'T: Nested conditionals in JSX

// Bad
return (
  <div>
    {user && user.name && user.isActive && (
      <span>{user.name}</span>
    )}
  </div>
)

// Good
if (!user?.name || !user.isActive) return null
return <span>{user.name}</span>

---

Hooks Best Practices

useState

// ✅ Simple state
const [count, setCount] = useState(0)

// ✅ Functional updates for derived state
setCount(prev => prev + 1)

// ✅ Lazy initialization for expensive defaults
const [data, setData] = useState(() => computeExpensiveDefault())

useEffect

// ✅ Cleanup subscriptions
useEffect(() => {
  const subscription = api.subscribe(handler)
  return () => subscription.unsubscribe()
}, [handler])

// ✅ Dependency array should include all used values
useEffect(() => {
  fetchUser(userId)
}, [userId])  // userId is used, so include it

useMemo and useCallback

// ✅ Memoize expensive calculations
const sortedItems = useMemo(
  () => items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
)

// ✅ Memoize callbacks passed to children
const handleClick = useCallback(() => {
  doSomething(id)
}, [id])