React: Timer (setInterval) in Komponenten

Timer starten und stoppen in React-Komponenten.

Ich hatte in einem Projekt Bedarf an einem Timer, welcher regelmäßig etwas aktualisiert. Dabei hatte ich ein kleines Problem, meine Beispielanwendung:

Den Timer startete ich naiverweise einfach in der Komponente:

React ist allerdings recht klug und lädt und aktualisiert die Komponenten im Hintergrund, was bedeutete, dass dieser Code immer wieder ausgeführt worden ist, wenn man zwischen den Tabs wechselt. In dessen Folge wurden immer wieder neue Timer-Events registriert.

Meine Lösung war die Komponente in eine React-Komponente umzubauen. Diese bringt dann Dinge wie “componentDidMount()” und “componentWillUnmount()” mit. Diese Events werden ausgeführt, wenn die Komponente angezeigt wird und auch, wenn diese wieder verschwindet.

import * as React from 'react';
 
class Clock extends React.Component<any, any> {
    private timerId: any;
 
    constructor(props: any) {
        super(props);
        this.state = {  currentTime : "-" };
    }
 
    componentDidMount() {
        console.log("Starting timer 1");
        this.timerId = setInterval(this.updateStatus, 1000);
    }
 
    componentWillUnmount() {
        console.log("Stopping timer 2");
        clearInterval(this.timerId);
    }
 
    updateStatus = () => {
        console.log("Timer 1 fired");
        let currentdate = new Date();
        let datetime = "Last Sync: " + currentdate.getDate() + "/"
            + (currentdate.getMonth()+1)  + "/"
            + currentdate.getFullYear() + " @ "
            + currentdate.getHours() + ":"
            + currentdate.getMinutes() + ":"
            + currentdate.getSeconds();
 
        this.setState({ currentTime: datetime});
    }
 
    render() {
        return <div>
            <p>{this.state.currentTime}</p>
        </div>
    };
}
 
export default Clock;

Dies erlaubt es, die Referenz auf den Timer, die ID, zu speichern und den Timer beim Ausblenden mit “clearInterval” wieder zu entfernen.

Fertig! Der Timer wird nun gestartet und wieder gestoppt, sodass dieser nur einmal aktiv ist.

Den Beispielcode des Projekts gibt es auf Github.