Dumb Components

Dumb components are the most reusable components available, because they have a know-nothing approach to the application in which they are used. Think of simple HTML DOM elements: an anchor tag knows nothing about the app using it and relies on the app passing prop like href, title, and target. These are examples of dumb components.

Dumb components are incredibly reusable because they are not specific to any one use case or application.

An example of a dumb component would be the Avatar component shown below:

import React from 'react';
import cx from 'util/StyleClasses.js';
import style from './style.scss';

var Avatar = React.createClass({

  propTypes: {
    circle: React.PropTypes.bool,
    rounded: React.PropTypes.bool,
    src: React.PropTypes.string.isRequired
  },

  getDefaultProps () {
    return {
      src: 'none',
      circle: false,
      rounded: false
    };
  },

  render() {
    var classes = {
      circle: (this.props.circle ? 'circle' : ''),
      rounded: (this.props.rounded ? 'rounded' : '')
    };
    var classnames = cx(style, [
      'this',
      classes.circle,
      classes.rounded
      ]
    );

    return (
      <img {...this.props} className={ classnames } src={ this.props.src }/>
    );
  }
});

module.exports = Avatar;

The Avatar component has no awareness of external application state, does not connect to any Flux interfaces, and is passed the exact data it needs to render (via props).

Whenever possible, you should favor creating reusable dumb components, not only because of the re-usability, but also because by removing application awareness and state, we drastically reduce complexity of the component itself. When a component does not know anything about the application, you have fewer parts of your code which may break when making app-level changes.