Alan Alickovic React Application Architecture For Production Today

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 junior developer, Sarah, asked, "Where does the socket disconnect logic go?" 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)} />; } He wrote a that emitted inventory events