React Ui Patterns

---
version: 4.1.0-fractal
name: react-ui-patterns
description: Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
---

# React UI Patterns

## Core Principles

1. **Never show stale UI** - Loading spinners only when actually loading
2. **Always surface errors** - Users must know when something fails
3. **Optimistic updates** - Make the UI feel instant
4. **Progressive disclosure** - Show content as it becomes available
5. **Graceful degradation** - Partial data is better than no data

## Loading State Patterns

## 🧠 Knowledge Modules (Fractal Skills)

### 1. [The Golden Rule](./sub-skills/the-golden-rule.md)
### 2. [Loading State Decision Tree](./sub-skills/loading-state-decision-tree.md)
### 3. [Skeleton vs Spinner](./sub-skills/skeleton-vs-spinner.md)
### 4. [The Error Handling Hierarchy](./sub-skills/the-error-handling-hierarchy.md)
### 5. [Always Show Errors](./sub-skills/always-show-errors.md)
### 6. [Error State Component Pattern](./sub-skills/error-state-component-pattern.md)
### 7. [Button Loading State](./sub-skills/button-loading-state.md)
### 8. [Disable During Operations](./sub-skills/disable-during-operations.md)
### 9. [Empty State Requirements](./sub-skills/empty-state-requirements.md)
### 10. [Contextual Empty States](./sub-skills/contextual-empty-states.md)
### 11. [Loading States](./sub-skills/loading-states.md)
### 12. [Error Handling](./sub-skills/error-handling.md)
### 13. [Button States](./sub-skills/button-states.md)