I'm beginner of react development with redux. I'm wondering what are the Presentational Components and Container Components.

• How to categorized ponents as Presentational or Container ?
• What are the difference between these two ?
• What are the benefit of categorizing ponents this way ?

I'm beginner of react development with redux. I'm wondering what are the Presentational Components and Container Components.

• How to categorized ponents as Presentational or Container ?
• What are the difference between these two ?
• What are the benefit of categorizing ponents this way ?

• javascript
• reactjs
• redux
• react-redux

• 4 Here's a post by Dan Abramov explaining this pattern. – Assan Commented Jan 13, 2017 at 13:42
• 1 @Assan Thank you for you – cjohn Commented Jan 13, 2017 at 13:52
• hackernoon./… – zloctb Commented Nov 3, 2017 at 9:10

3 Answers 3

You’ll find your ponents much easier to reuse and reason about if you divide them into two categories. I call them Container and Presentational ponents.

I assume you have knowledge about redux architecture

Container Components

• Aware of redux
• Subscribe redux state
• Dispatch to redux actions
• Generated by react-redux
• Focus on how things work

Presentational Componets

• Unaware of redux
• Read data from props
• Invoke callbacks on props
• Written by developer
• Focus on how thing look

Benefits of categorizing ponents

• Reusability
• Separation of concerns

For more details read this article

Here is the summarized version of the differences inorder to understand easily, even though some of them are related to the above answer above,

Container Components

• Are concerned with how things work
• Responsible for providing data to presentational ponents via properties
• Also responsible for handling state changes triggered inside a presentation ponent via callback properties. These state changes are often done via dispatching an action.

Example :

class TodoApp extends Component {
 ponentDidMount() {
 this.props.actions.getTodos();
 }
 render() {
 const { todos, actions } = this.props;
 return (
 <div>
 <Header addTodo={actions.addTodo} />
 <MainSection todos={todos} actions={actions} />
 </div>
 );
 }
}
function mapState(state) {
 return {
 todos: state.todos
 };
}
function mapDispatch(dispatch) {
 return {
 actions: bindActionCreators(TodoActions, dispatch)
 };
}
export default connect(mapState, mapDispatch)(TodoApp);

Presentation Components

• Are concerned with how things look
• Use props for displaying everything
• Do not manage state at all
• Don’t emit actions, but may take callbacks that do via props

Example:

<MyComponent
 title=“No state, just props.”
 barLabels={["MD", "VA", "DE", "DC"]}
 barValues={[13.626332, 47.989636, 9.596008, 28.788024]}
/>

This is how I understand it:

Presentation Components

concern with how things look

Container Components

ponents with logic involved

However, upon further research, I realised that such separation is sometimes unnecessary as mentioned by Dan Abramov here: https://medium./@dan_abramov/smart-and-dumb-ponents-7ca2f9a7c7d0

You can understand presentation ponent as something you find in react UI ponent library. They makes UI ponent looks pretty. Then, one only have to pose the presentation ponents in container ponent as needed.

Having said that, if you're using a ponent library, then most of the ponent you coded will be container ponent. Of course you can make your own react UI ponent library.

As nothing is hard rules in programming, react UI ponent library may have some logic tightly coupled with the ponent (ie how it behaves, such as a drawer ponent) and still treated to be presentation ponent.