Presentational and container components

Every beginning is difficult. React is no exception and as beginners we also have lots of questions. Where I’m supposed to put my data, how to communicate changes or how to manage state? The answers of these questions are very often a matter of context and sometimes just practice and experience with the library. However, there is a pattern which is used widely and helps organizing React based applications - splitting the component into presentation and container.

Let’s start with a simple example that illustrates the problem and then split the component into container and presentation. We will use a Clock component. It accepts a Date object as a prop and displays the time in real time.

  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.   }
  7.   render() {
  8.     const time = this._formatTime(this.state.time);
  9.     return (
  10.       <h1>
  11.         { time.hours } : { time.minutes } : { time.seconds }
  12.       </h1>
  13.     );
  14.   }
  15.   componentDidMount() {
  16.     this._interval = setInterval(this._update, 1000);
  17.   }
  18.   componentWillUnmount() {
  19.     clearInterval(this._interval);
  20.   }
  21.   _formatTime(time) {
  22.     var [ hours, minutes, seconds ] = [
  23.       time.getHours(),
  24.       time.getMinutes(),
  25.       time.getSeconds()
  26.     ].map(num => num < 10 ? '0' + num : num);
  28.     return { hours, minutes, seconds };
  29.   }
  30.   _updateTime() {
  31.     this.setState({
  32.       time: new Date(this.state.time.getTime() + 1000)
  33.     });
  34.   }
  35. };
  37. ReactDOM.render(<Clock time={ new Date() }/>, ...);

In the constructor of the component we initialize the component’s state which in our case is just the current time value. By using setInterval we update the state every second and the component is re-rendered. To make it look like a real clock, we use two helper methods - _formatTime and _updateTime. The first one is about extracting hours, minutes and seconds and making sure that they are following the two-digits format. _updateTime is mutating the current time object by one second.

The problems

There are couple of things happening in our component. It looks like it has too many responsibilities.

  • It mutates the state by itself. Changing the time inside the component may not be a good idea because then only Clock knows the current value. If there is another part of the system that depends on this data it will be difficult to share it.
  • _formatTime is actually doing two things - it extracts the needed information from the date object and makes sure that the values are always presented by two digits. That’s fine but it will be nice if the extracting is not part of the function because then it is bound to the type of the time object (coming as a prop). I.e. knows specifics about the shape of the data and at the same time deals with the visualization of it.

Extracting the container

Containers know about data, its 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 like is easy to be used by the presentational component. Very often we use higher-order components to create containers because they provide a buffer space where we can insert custom logic.

Here’s how our ClockContainer looks like:

  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.   }
  10.   render() {
  11.     return <Clock { ...this._extract(this.state.time) }/>;
  12.   }
  13.   componentDidMount() {
  14.     this._interval = setInterval(this._update, 1000);
  15.   }
  16.   componentWillUnmount() {
  17.     clearInterval(this._interval);
  18.   }
  19.   _extract(time) {
  20.     return {
  21.       hours: time.getHours(),
  22.       minutes: time.getMinutes(),
  23.       seconds: time.getSeconds()
  24.     };
  25.   }
  26.   _updateTime() {
  27.     this.setState({
  28.       time: new Date(this.state.time.getTime() + 1000)
  29.     });
  30.   }
  31. };

It still accepts time (a date object), does the setInterval loop and knows details about the data (getHours, getMinutes and getSeconds). In the end renders the presentational component and passes three numbers for hours, minutes and seconds. There is nothing about how the things look like. Only business logic.

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.

In our case the presentational component contains only the two-digits check and returns the <h1> tag:

  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. };

Benefits

Splitting the components in containers and presentation increases the reusability of the components. Our Clock function/component may exist in application that doesn’t change the time or it’s not working with JavaScript’s Date object. That’s because it is pretty dummy. No details about the data are required.

The containers encapsulate logic and we may use them together with different renderers because they don’t leak information about the visual part. The approach that we took above is a good example of how the container doesn’t care about how the things look like. We may easily switch from digital to analog clock and the only one change will be to replace the <Clock> component in the render method.

Even the testing becomes easier because the components have less responsibilities. Containers are not concern with UI. Presentational components are pure renderers and it is enough to run expectations on the resulted markup.

Final thoughts

The concept of container and presentation is not new at all but it fits really nicely with React. It makes our applications better structured, easy to manage and scale.