Alan Alickovic React Application Architecture For Production May 2026

Alan refactored it live:

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.

"Listen," he said. "We are not building a React app. We are building a . There’s a difference." alan alickovic react application architecture for production

// 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)} />; }

"When React re-renders, these services don't care. They are immutable islands of truth." Alan refactored it live: Alan Alickovic groaned, rubbing

Alan sat up in bed. "No more," he whispered. At 8:00 AM, he walked into the "war room." The team was exhausted. Juniors were frantically adding console.log statements. The product manager was asking, "Can we just wrap it in a try/catch ?"

He picked up the ugliest component in the codebase: ProductCard.tsx . It did seven things. Components were 3,000 lines long

The pager went off at 3:14 AM. Again.