Data-fetching components handle loading, success, error, and empty states

Components that only handle the success path leave users stranded in three common failure modes: slow network (indefinite spinner), API error (blank or partially rendered page), and empty server response (no indication of why nothing appeared). CWE-703 (improper check for exceptional conditions) applies to missing error state handling. In vibe-coded applications this is one of the most frequent defects: AI code generation reliably handles the success path and omits the loading, error, and empty branches — leaving large surface areas completely unhandled.

Handle all four states explicitly in every data-fetching component. With TanStack Query or SWR, the state variables are provided; with raw useEffect, model them explicitly.

// components/item-list.tsx
export function ItemList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['items'],
    queryFn: fetchItems,
  })

  if (isLoading) return <Skeleton />
  if (error) return <ErrorMessage message="Failed to load items. Please refresh." />
  if (!data?.length) return <EmptyState message="No items yet." />
  return <ul>{data.map((item) => <li key={item.id}>{item.name}</li>)}</ul>
}

Do not conflate the error state with the empty state — an empty array is not an error, and an error is not an empty array.