Aus dem Kurs: React Grundkurs

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.

Lifecycle mit useEffect: Countdown

Lifecycle mit useEffect: Countdown – Tutorial zu React.js

Aus dem Kurs: React Grundkurs

Gratismonat starten Für Ihr Team erwerben

Lifecycle mit useEffect: Countdown

“

Wir lernen jetzt einen neuen Hook kennen. Mit useEffect sind wir in der Lage, auf Lifecycle Changes zu reagieren, ähnlich wie in Class Components. Wir bauen jetzt einen Countdown mit einer Function Component. Zuerst brauchen wir einen neuen State mit useState und dem Initialwert 10, denn wir wollen von 10 auf 0 runter zählen. Diesen Wert setzen wir dann sowohl in unsere schöne HTML Progress Bar als auch als lesbare Zahl in unseren Paragraph. Was wir jetzt im Grunde bräuchten, wäre componentDidMount. Das gibt es aber in Function Components nicht. Stattdessen gibt es useEffect. useEffect nimmt als ersten Parameter eine Function entgegen, die bei jeder Änderung der Komponente aufgerufen wird, also auch beim initialen Mount. Das Problem ist jedoch, dass wir nicht jedes Mal ein neues Intervall erzeugen wollen, wenn sich irgendetwas geändert hat, denn sonst haben wir irgendwann unendlich viele Intervalle, deswegen gibt es in useEffect einen zweiten Parameter, der ein sogenanntes…

Inhalt