// 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)} />; }
"Listen," he said. "We are not building a React app. We are building a . There’s a difference."
Alan refactored it live:
Alan Alickovic React Application Architecture For Production __top__ [ Trusted Source ]
// 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)} />; }
"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
Alan refactored it live: