react-ui-patterns

React UI Patterns — Modern Best Practices for React UI State Management

Skill Overview

React UI Patterns is a set of UI state management guidelines designed specifically for React developers. It covers core patterns such as loading states, error handling, and empty state design, helping you build components with excellent user experience.

Use Cases

Building UI Components: When you need to develop React components that involve data loading, error handling, and empty state display, these patterns ensure your UI behaves appropriately in all states.

Handling Asynchronous Data: When fetching data from an API, submitting forms, or performing other async operations, following these patterns helps you avoid common issues like loading flicker and silently lost errors.

Managing Multiple UI States: When you need to coordinate various UI states such as loading, success, failure, and empty data, this guide provides clear decision trees and code templates.

Core Features

Loading State Pattern: Offers the “golden rule” guidance—show a loading indicator only when there is no data, preventing unnecessary loading flicker when cached data exists. It also details when to use spinners and skeletons.

Error Handling Hierarchy: Defines a four-level error handling system from inline errors to full-screen errors, emphasizing that errors must never be swallowed silently. Users must always know when an operation fails.

Button and Form Patterns: Ensures that buttons are correctly disabled and show a loading state during async operations to prevent duplicate submissions. It also provides complete best-practice templates for form submissions.

Common Questions

When should I show a spinner, and when should I show a skeleton?

Use a spinner when the content shape is unknown (e.g., modal actions, button submissions). Use a skeleton when the content shape is known (e.g., list layouts, card layouts, initial page loads). The core principle is: only show loading states when there is truly no data—avoid flicker when cached data is already present.

How do I avoid React loading state flicker?

Follow the “show loading only when there is no data” golden rule. The condition should be if (loading && !data) rather than if (loading) alone. This way, when refetching with cached data, users can keep seeing the existing content instead of being shown a flickering spinner.

Should errors always be shown to users?

Yes—errors must never be swallowed silently. Choose an appropriate presentation based on how severe the error is: field-level inline errors for form validation, toast notifications for recoverable errors, error banners for page-level errors, and full-screen error pages for unrecoverable failures. Users must know when an operation fails and how to retry.