Problem 11: Async Props

Handling async data in props instead of using Server Components

Messy Approach: Async Props

Passing promises or async data through props

❌ Messy:

interface UserCardProps {
  userPromise: Promise<User>
  onLoad?: (user: User) => void
  isLoading?: boolean
  error?: Error | null
}

// Component must handle promise resolution
function UserCard({ userPromise, onLoad, isLoading, error }: UserCardProps) {
  const [user, setUser] = useState<User | null>(null)
  
  useEffect(() => {
    userPromise.then(u => {
      setUser(u)
      onLoad?.(u)
    }).catch(e => {
      // error handling...
    })
  }, [userPromise, onLoad])
  
  // Complex loading/error states...
}

Issues

• Props become promises that need resolution

• Complex loading/error state management

• Race conditions and memory leaks

• Difficult to handle multiple async props

• Poor performance (no streaming)