React interval HoC

ContainerExample.js

import { connect } from 'react-redux';

const mapStateToProps = ({ refreshThing }) => {
  return {
    refreshInterval: 60000,
    refreshEnabled: true,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    updateStuff: () => dispatch({ type: 'UPDATE_STUFF' }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(
  WithAutoRefresh(ComponentExample, {
    getInterval: props => props.refreshInterval,
    isEnabled: props => props.refreshEnabled,
    onRefresh: props => props.updateStuff(),
  }),
);

withInterval.js

import React from 'react';

function withInterval(WrappedComponent, { getInterval, isEnabled, onRefresh }) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.intervalId = null;
    }

    clearRefresh() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    }

    enableRefresh() {
      this.clearRefresh();
      this.intervalId = setInterval(
        () => onRefresh(this.props),
        getInterval(this.props),
      );
    }

    componentDidMount() {
      if (isEnabled(this.props)) {
        this.enableRefresh()
      }
    }

    componentWillUnmount() {
      this.clearRefresh();
    }

    componentWillReceiveProps(nextProps) {
      if (isEnabled(this.props)) {
        this.enableRefresh()
      } else {
        this.clearRefresh();
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

export default withInterval;