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.
"First," Alan said, erasing a tangled mess of arrows. "We separate business logic from UI. No more useEffect that fetches data AND validates coupons AND plays a sound."
He called this . Parents orchestrate; children only present. The Turning Point Three weeks later, a new feature arrived: "Real-time Inventory." Old Alan would have panicked. New Alan smiled. alan alickovic react application architecture for production
The pager went off at 3:14 AM. Again.
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. The team had been using Context for everything
"Listen," he said. "We are not building a React app. We are building a . There’s a difference."
Alan pointed to a single file: services/websocket.ts . "We separate business logic from UI
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.