// 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. 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
The CEO loved speed. The CTO loved features. Alan loved sanity. // If it needs data, the PARENT provides it via a query