Container vs Presentational Components in ReactJS

Presentational/Functional/Stateless Components

Functional components in ReactJS is a simpler way of creating components. Some of the key features of functional components are:

  • It is best suitable for components which only consists of a render method
  • They are also called stateless components since they don’t have an internal state and just make use of props to display the data
  • It is not a class which extends React.Component
  • It is just a function which accepts props and returns the rendered component
  • You can define propTypes and defaultProps on the function
let helloComponent = (props) => {
return(
<h3>{props.name}</h3>
)
}

helloComponent.propTypes = {
   name : React.PropTypes.string.isRequired
}

helloComponent.defaultProps = {
   name : 'Gagandeep'
}

Container Components

Container components on the other hand are more concerned about how things work rather than how things look. Main features of a container components are:

  • Suitable when components need to have their own state
  • It can have all the lifecycle methods of a React component
  • Communicate to Flux/Redux via actions and receive data from them, which is passed to other presentational or container components
  • Contains presentational and container components within itself
class helloComponent extends React.Component{
   render(){
      return(
         <h3>{this.props.name}</h3>
      )
   }
}

helloComponent.propTypes = {
   name : React.PropTypes.string.isRequired
}

helloComponent.defaultProps = {
   name : 'Gagandeep'
}

Related Posts