Timer

Implementing timer component in React - how hard can it be?

Lets implement it with React only:

class Timer extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            counter: 0
        }
    }

    componentWillMount() {
        setInterval(
            () => this.setState(state => ({ counter: state.counter + 1 })),
            1000
        )
    }

    render() {
        return <div>{ this.state.counter }</div>
    }
}

Simple, right? But what will happen when we unmount the component? It will continue to execute setState() and will throw an exception!

So, we have to make sure that we clear the interval to avoid it:

class Timer extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            counter: 0
        }
    }

    componentWillMount() {
        this.intervalRef = setInterval(
            () => this.setState(state => ({ counter: state.counter + 1 })),
            1000
        )
    }

    componentWillUnmount() {
        clearInterval(this.intervalRef)
    }

    render() {
        return <div>{ this.state.counter }</div>
    }
}

The problem is so popular, there is even a special library for that: https://github.com/reactjs/react-timer-mixin

RxConnect way

The same can be implemented with one-liner in RxConnect:

import { rxConnect } from "rx-connect";

@rxConnect(
    Rx.Observable.timer(0, 1000).timestamp()
)
class Timer extends React.PureComponent {
    render() {
        return <div>{ this.props.value }</div>
    }
}

or even:

import { rxConnect } from "rx-connect";

const Timer = rxConnect(
    Rx.Observable.timer(0, 1000).timestamp()
)(({ value }) => <div>{ value }</div>)

Benefits:

• No need to handle subscription manually (error-prone!)
• Component is pure
• Code is simple and does one thing

Future reading:

• Rx.Observable.timer
• react-timer-mixin