Presentational and container components describe an architectural pattern where UI rendering and data or application logic are separated. ### Presentational Component A presentational component primarily receives data and callbacks through props and renders UI. ```jsx function UserProfile({ user, onFollow }) { return (

{user.name}

{user.bio}

); } ``` It does not need to know where `user` came from. ### Container Component A container historically handled data or application behavior: ```jsx function UserProfileContainer({ userId }) { const user = useUser(userId); const handleFollow = () => { followUser(userId); }; if (!user) { return

; } return ( ); } ``` Conceptually: ```text Container → obtains data → handles application logic → prepares callbacks ↓ Presentational Component → receives props → renders UI ``` ### Why Was This Pattern Popular? It helped separate: ```text How data works ``` from: ```text How UI looks ``` This can make visual components reusable and easier to test. ### Is This Still Required in Modern React? No. [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) allow logic to be extracted directly: ```jsx const user = useUser(userId); ``` so a separate container component is often unnecessary. However, the underlying principle of separating concerns remains useful. ### Interview-Ready Answer Presentational components focus mainly on rendering UI from props, while container components traditionally handled data fetching, state, and application logic before passing results to presentational components. Modern [React Hooks](/courses/reactjs) reduce the need for strict container components, but separating complex logic from reusable UI remains a valuable design principle.