Presentational and Container components

Problem

Data and logic together.

  1. class Clock extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {time: this.props.time};
  5.     this._update = this._updateTime.bind(this);
  6.   }
  8.   render() {
  9.     var time = this._formatTime(this.state.time);
  10.     return (
  11.       <h1>{ time.hours } : { time.minutes } : { time.seconds }</h1>
  12.     );
  13.   }
  15.   componentDidMount() {
  16.     this._interval = setInterval(this._update, 1000);
  17.   }
  19.   componentWillUnmount() {
  20.     clearInterval(this._interval);
  21.   }
  23.   _formatTime(time) {
  24.     var [ hours, minutes, seconds ] = [
  25.       time.getHours(),
  26.       time.getMinutes(),
  27.       time.getSeconds()
  28.     ].map(num => num < 10 ? '0' + num : num);
  30.     return {hours, minutes, seconds};
  31.   }
  33.   _updateTime() {
  34.     this.setState({time: new Date(this.state.time.getTime() + 1000)});
  35.   }
  36. }
  38. ReactDOM.render(<Clock time={ new Date() }/>, ...);

Solution

Let’s split the component into two parts - container and presentation.

Container Component

Containers know about data, it’s shape and where it comes from. They know details about how the things work or the so called business logic.
They receive information and format it so it is easy to use by the presentational component. Very often we use higher-order components to create containers.
Their render method contains only the presentational component.

  1. // Clock/index.js
  2. import Clock from './Clock.jsx'; // <-- that's the presentational component
  4. export default class ClockContainer extends React.Component {
  5.   constructor(props) {
  6.     super(props);
  7.     this.state = {time: props.time};
  8.     this._update = this._updateTime.bind(this);
  9.   }
  11.   render() {
  12.     return <Clock { ...this._extract(this.state.time) }/>;
  13.   }
  15.   componentDidMount() {
  16.     this._interval = setInterval(this._update, 1000);
  17.   }
  19.   componentWillUnmount() {
  20.     clearInterval(this._interval);
  21.   }
  23.   _extract(time) {
  24.     return {
  25.       hours: time.getHours(),
  26.       minutes: time.getMinutes(),
  27.       seconds: time.getSeconds()
  28.     };
  29.   }
  31.   _updateTime() {
  32.     this.setState({time: new Date(this.state.time.getTime() + 1000)});
  33.   }
  34. };

Presentational component

Presentational components are concerned with how the things look. They have the additional markup needed for making the page pretty.
Such components are not bound to anything and have no dependencies.
Very often implemented as a stateless functional components they don’t have internal state.

  1. // Clock/Clock.jsx
  2. export default function Clock(props) {
  3.   var [ hours, minutes, seconds ] = [
  4.     props.hours,
  5.     props.minutes,
  6.     props.seconds
  7.   ].map(num => num < 10 ? '0' + num : num);
  9.   return <h1>{ hours } : { minutes } : { seconds }</h1>;
  10. };

The nice things about containers is that they encapsulate logic and may inject data into different renderers.
Very often a file that exports a container is not sending out a class directly but a function.
For example, instead of using

  1. import Clock from './Clock.jsx';
  2. export default class ClockContainer extends React.Component {
  3.   render() {
  4.     return <Clock />;
  5.   }
  6. }

We may export a function that accepts the presentational component:

  1. export default function (Component) {
  2.   return class Container extends React.Component {
  3.     render() {
  4.       return <Component />;
  5.     }
  6.   }
  7. }

Using this technique our container is really flexible in rendering its result.
It will be really helpful if we want to switch from digital to analog clock representation.

Related links: