Production | Alan Alickovic React Application Architecture For

"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."

Alan grabbed a whiteboard marker.

// 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

The CEO loved speed. The CTO loved features. Alan loved sanity. "First," Alan said, erasing a tangled mess of arrows

But tonight, the app had finally snapped. A user reported that adding a pair of sneakers to their cart caused the entire product grid to re-render seventeen times, crashed the login modal, and then—in a final act of rebellion—displayed the total price in Rubles instead of Dollars. // BEFORE: The God Component function ProductCard({ product

Alan pointed to a single file: services/websocket.ts .