usage.js

import React, { Component, PropTypes } from "react";
import Volatile from "./Volatile";

@Volatile({ timeout: 2500 })
class UI extends Component {
  static propTypes = {
    data: PropTypes.number.isRequired,
  };

  shouldComponentUpdate(nextProps) {
    return nextProps.data !== this.props.data;
  }

  rener() {
    return (<div>{ this.props.data }</div>);
  }
}
            

volatile-component.js

import React from "react";

export default function Volatile(opts = { timeout: 1000 }) {
  return (Component) => {
    return class VolatileComponent extends React.Component {
      constructor(props) {
        super(...props);

        this.state = { visible: false };

        this._timerId = 0;
      }

      componentWillReceiveProps(nextProps) {
        if (this::Component.prototype.shouldComponentUpdate(nextProps)) { // <- !!?!?!?!???!?
          this.setState({ visible: true });
          clearTimeout(this._timerId);
          this._timerId = setTimeout(() => {
            this.setState({ visible: false });
          }, opts.timeout);
        }
      }

      shouldComponentUpdate(_, nextState) {
        return nextState.visible || (nextState.visible !== this.state.visible);
      }

      render() {
        if (!this.state.visible) {
          return null;
        }
        return (<Component { ...this.props }/>);
      }
    };
  };
}