medium

thing.full.js

import React from 'react';
import PubSub from 'pubsub-js';

export default class Thing extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'The value is'
    }
  }

  componentDidMount() {
    PubSub.publish('thing.did.mount');
  }

  componentWillReceiveProps(nextProps, nextState) {
    PubSub.publish('thing.will.receive.props');
    return true
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.value !== nextProps.value || this.state.message !== nextState.message) {
      PubSub.publish('thing.should.update');
      return true;
    }
    return false;
  }

  componentWillUpdate(nextProps, nextState) {
    PubSub.publish('thing.will.update');
    return true;
  }

  componentWillUnmount() {
    PubSub.publish('thing.will.unmount');
  }

  render() {
    return (<h1>{`${this.state.message} ${this.props.value}`}</h1>);
  }
}