By cjohn


2017-01-13 13:32:12 8 Comments

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

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

2 comments

@Sajeetharan 2018-09-02 11:43:55

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 components via properties
  • Also responsible for handling state changes triggered inside a presentation component via callback properties. These state changes are often done via dispatching an action.

Example :

class TodoApp extends Component {
 componentDidMount() {
 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]}
/>

@Niroshan Ranapathi 2017-01-13 13:50:07

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

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 components

  • Reusability
  • Separation of concerns

For more details read this article

Related Questions

Sponsored Content

13 Answered Questions

[SOLVED] How to dispatch a Redux action with a timeout?

34 Answered Questions

[SOLVED] var functionName = function() {} vs function functionName() {}

4 Answered Questions

8 Answered Questions

[SOLVED] Why use Redux over Facebook Flux?

38 Answered Questions

[SOLVED] Detecting an "invalid date" Date instance in JavaScript

  • 2009-08-30 11:34:40
  • orip
  • 607198 View
  • 1156 Score
  • 38 Answer
  • Tags:   javascript date

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

18 Answered Questions

[SOLVED] How to pass props to {this.props.children}

6 Answered Questions

[SOLVED] Difference between component and container in react redux

4 Answered Questions

[SOLVED] Passing props to react-redux container component

48 Answered Questions

Sponsored Content