Solution – Code Challenge No. 1 – Mastering Hooks

Vor einer Woche haben wir unsere Code-Challenge gepostet. Ziel war es, Class-Components mit Hilfe der neuen React-Hooks in Functional-Components zu refaktorieren. In diesem Post werden wir die Challenge abschließen und auflösen. Gemeinsam sollten wir jetzt ein gutes Verständnis davon bekommen haben, React-Components mit States und Lifecycle-Methoden als funktionale Komponenten zu entwickeln. Solltet ihr noch Interesse an der Challenge haben, könnt ihr die Codesandbox jederzeit forken und mit dem Lösen der Aufgaben beginnen.

Challenge Recap

Ziel dieser Challenge war es, unser erworbenes Wissen über React-Hooks anzuwenden und Class-Components in Stateful-Functional-Components umzuschreiben. Damit ihr auch gleich loslegen konntet, hatten wir eine Sandbox mit React 16.8 eingerichtet.

React History

React hat mit der Version 16.7 alpha ein neues Feature in Form von Hooks eingeführt. Es wurden u. a. zwei neue APIs für das State-Handling (useState) und das Verwalten der Lifecycle-Methoden (useEffect) eingeführt. Im nächsten Abschnitt schauen wir uns die Lösung an und wie wir die Hooks nutzen können, um Functional-Components zu entwickeln.

Challenge Completed

Die Lösung stellen wir euch wieder als Codesandbox zur Verfügung, und danach gehen wir im Detail die einzelnen Aufgaben durch. Wer keine ausführliche Beschreibung haben möchte, kann natürlich sofort in die Sandbox springen. Wenn ihr noch Verbesserungen habt, teilt uns diese gerne in den Kommentaren oder über unseren Twitterchannel unter dem Hashtag #codecentricChallenge mit.

Task No. 1 – 01.js

Den ersten Task haben wir im klassischen Stil als Class-Component geschrieben.

Wie ihr seht, haben wir eine state-Variable size verwendet, damit wir später auf diese mit einer Funktion zum Erhöhen der Größe (increaseSize) zurückgreifen können. Mit dem Hook useState schreiben wir diese Klasse in eine Funktion um.

Der Code ist sichtbar schlanker geworden. Wir nutzen Destructuring für unseren useState-Hook und weisen ihm einen initialen Wert von 50 zu. Danach können wir auf die Variable size und die Funktion increaseSize() in unserer Komponente zurückgreifen.

Task No. 2 – 02.js

Ähnlich wie unsere erste Aufgabe, aber diesmal weisen wir unserer State-Variable einen String zu.

Erneut nutzen wir den Hook useState, damit wir eine Functional-Component erhalten.

In unserer Komponente haben wir eine Funktion zum Ändern der Stimmung des Kawaii-Emojis eingeführt. Mithilfe von Destructuring können wir diese über unseren useState-Hook nutzen.

Task No. 3 – 03.js

In der dritten Aufgabe haben wir es mit vier sich verändernden State-Variablen zu tun. Wir nutzen auch hier wieder useState und arbeiten mit Strings und boolschen Werten.

Nach dem Refactoring sieht unsere Komponente so aus:

swapKawai() erledigt die Arbeit für uns und ändert die Werte der State-Variablen.

Task No. 4 – 04.js

Hier kommt unsere Lifecycle-Methode componentDidMount zum Einsatz. Diese nutzen wir zum Ändern der State-Variable, fünf Sekunden nachdem die Komponente gemountet wurde.

Um unsere Komponente funktional umzuschreiben, greifen wir zusätzlich auf den Hook useEffect zurück. In Kombination mit useState erhalten wir folgendes Ergebnis:

Im Hook useEffect nutzen wir setTimeout, um die Ausführung der Funktion changingMood zu verzögern. Beachtet das leere Array, welches als zweiter Parameter mitgegeben wird. Dieses erlaubt es der Funktion nur einmalig (beim ersten Rendern) ausgeführt zu werden. Funktionen innerhalb des useEffect-Hooks werden immer ausgeführt, wenn sich ein Wert innerhalb des Arrays verändert. Wir können dieses Beispiel noch optimieren, indem wir in das Array die mood-Variable geben. Dann wird es möglich, auch mehrmals die Stimmung unseres Emojis zu verändern. Denn immer wenn wir den Button klicken, ändert sich der Mood auf „sad“ und die Funktion in useEffect wird erneut getriggert. Nach fünf Sekunden ist das Emoji dann wieder „happy“.

Task No. 5 – 05.js

In der letzten Aufgabe greifen wir auf den Ternary-Operator zurück und blenden eine Komponente ein und aus.

Und der Umbau zu einer funktionalen Komponente:

useState wird genutzt, um der State-Variable einen Wert zuzuweisen und diesen zu verändern.

Packy.js

Unser Packy war eine einfache Class-Component mit der Lifecycle-Methode componentWillUnmount und unserem alert.

Refaktorieren wir Packy zu einer Functional-Component mit dem useEffect-Hook, behalten wir alle Features, die wir auch mit Nutzung der Lifecycle-Methode componentWillUnmount hatten. Dazu müssen wir in dem useEffect-Hook lediglich eine Funktion zurück geben. Diese wird immer dann aufgerufen, wenn die Komponente geunmountet wird.

Fazit

Wir hoffen, die Challenge hat euch Spaß gemacht und ihr konntet euch mit den React-Hooks vertraut machen. Wenn ihr Feedback für uns habt, hinterlasst dieses gerne in den Kommentaren. Wenn ihr kreative Ideen für weitere Challenges habt, schreibt uns einfach über die Kommentarfunktion oder unsere sozialen Kanäle.