Intermediate LevelReact JS & React 19
What is the Container/Presenter component pattern and why has it evolved?
❓ Interview Prompt: Explain Container / Presentational pattern, Smart vs Dumb components, separating data fetching from UI rendering, and custom hook evolution.
1. Container Component ("Smart"):
Handles data fetching, state management, and side effects. Does not contain styling.
2. Presentational Component ("Dumb"):
Receives data via props and renders UI layout/styling exclusively.
Evolution in Modern React:
Custom hooks have largely replaced container components. Developers extract data fetching into a custom hook ('useUserData()') and call it directly inside presentational components.
Code Implementation Example
jsx
// Modern Evolution: Custom Hook + Presentational Component
function UserProfileContainer() {
const { user, isLoading } = useUserData(); // Data fetching logic
if (isLoading) return <Spinner />;
return <UserProfileView user={user} />; // Presentational UI
}💡Separating data fetching container logic from presentational view UI.
🎯 Interview Key Takeaway
Extract data fetching logic into custom hooks while keeping presentational components focused on UI rendering.
#Patterns#Container Components#Hooks#Intermediate
Back to all React JS & React 19 Questions→