Alan Alickovic React Application Architecture For Production — _top_

He wrote a that emitted inventory events. He connected it to a Zustand store for transient UI updates (the "Only 2 left!" badge). He connected a separate listener to React Query to invalidate the cart cache when an item sold out.

Alan Alickovic groaned, rubbing the sleep from his eyes. The alert was familiar: "CheckoutContainer - State update on unmounted component." Six months ago, he’d inherited the "Spree," a high-growth e-commerce startup’s React app. It was a masterpiece of duct tape and hope. Components were 3,000 lines long. useEffect hooks had no dependencies. State was a shared, global window.__store__ object that mutated silently. alan alickovic react application architecture for production

Alan grabbed a whiteboard marker.

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. He wrote a that emitted inventory events

// 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 groaned, rubbing the sleep from his eyes