Direct Fetch — Component-Level Chaos
Fetching server data directly inside React components without centralized coordination. Each component independently manages its lifecycle, creating duplication and inconsistency at scale.
useEffect(() => {
fetch("/api/users")
.then(res => res.json())
.then(setUsers);
}, []);✅ Good Practices
- Simple and explicit for isolated views.
❌ Anti-Patterns
- Repeated requests, no cache coordination, and inconsistent UI across routes.
🧠 Decision
Acceptable for small components with no shared data dependencies.
📈 Scale Impact
Duplicated fetch logic increases network overhead and inconsistent state across screens.
⚖ Consistency Model
Each component reaches eventual consistency independently.
🏗 Infrastructure Impact
Higher backend load due to redundant requests.
🔥 Failure Mode
Race conditions and stale data when navigating between views.