Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

Zurück zur Übersicht

React - Wie erstelle ich einen Countdown richtig

#Tutorials#React

Einen Countdown in React zu erstellen ist relativ einfach, wenn man es denn richtig macht. Nach einigen Versuchen und ein bisschen Recherche bin ich dann auf eine funktionierende Lösung gekommen.

ERROR: Content Element with uid "3859" and type "ar_codeelem" has no rendering definition!

Wie funktioniert das Ganze ohne ein setInterval?

Da React mit dem useEffect-Hook die Komponente jedes mal bei Änderung der Abhängigen Variablen neu aufruft, machen wir uns diesen Effekt zu nutze und sagen, dass er jede Sekunde den Counter um 1 runterzählt. Sobald der Counter sich verändert greift der Hook wieder startet den Timeout wieder neu und der Counter wird nach und nach heruntergezählt.

Probleme mit anderen Lösungen

Benutzt man setInterval, wie man es von normalen JS Anwendungen herkennt, so kommt man schnell in die Schwierigkeit, dass die nach jedem neurendern des Countdown ein neuer Interval gestartet wird und wir bei 60 Sekunden, dann bei 60 Intervallen landen und unser Countdown sehr merkwürdig herunterzählt. 


Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.