Alan Alickovic React Application Architecture For Production May 2026

"When React re-renders, these services don't care. They are immutable islands of truth."

// BEFORE: The God Component function ProductCard({ product }) { const [isLoading, setIsLoading] = useState(false); const { user, updateCart, trackEvent, theme } = useAppContext(); // ... 200 lines of logic } // AFTER: Alan's Rule function ProductCard({ product, onAddToCart }) { // Only render logic. No data fetching. No side effects. // If it needs data, the PARENT provides it via a query. // If it needs to change data, it calls a prop callback. return <Card onClick={() => onAddToCart(product.id)} />; } alan alickovic react application architecture for production

Alan pointed to the whiteboard. The three circles were still there, now annotated with team notes. "When React re-renders, these services don't care

"In the initialize function. Not in a useEffect cleanup. Not in a component. The service manages its own lifecycle. The React app just subscribes to the results." Three months later, Black Friday hit. No data fetching

The team had been using Context for everything. One giant AppProvider that held user data, UI theme, WebSocket messages, and a forgotten boolean for whether the footer animation had played.