Observable Clock.jsx

Clock.jsx

class Clock extends React.Component {
  constructor(props) {
    super(props);
    console.log('new');
    this.state = { time: new Date() };
  }

  componentDidMount() {
    this.propsChangeSubject = new Subject();
    this.subscription = this.propsChangeSubject
      .pipe(
        switchMap(running => running ? interval(0, 1000) : empty()),
        tap(_ => this.setState({ time: new Date() }))
      )
      .subscribe();
    this.propsChangeSubject.next(this.props.running);
  }

  componentWillUnmount() {
    if (this.subscription) {
      this.subscription.dispose();
    }
  }

  componentDidUpdate(prevProps) {
    if (this.props.running != prevProps.running) {
      this.propsChangeSubject.next(this.props.running);
    }
  }

  render() {
    return (<span className="time">{this.state.time.toLocaleTimeString()}</span>);
  }
}