Ratgeber

React Hooks: Lohnt die Umstellung auf das Programmier-Konzept?

Hooks bei React erleichtert das Leben. (Foto: t3n)

Seit der Veröffentlichung von React 16.8 unterstützt das bekannte Framework sogenannte Hooks. Wir geben euch einen kurzen Überblick über einige Vor- und Nachteile der neuen Funktionalität.

Das Konzept Hooks erlaubt es euch, state und andere React-Funktionen zu nutzen, ohne dafür Klassen zu schreiben. Das löst ein Problem: Wenn keine Hooks verwendet und Funktionen aus Klassen wiederverwendet werden sollen, dann muss die gesamte Komponente umstrukturiert werden.

Eine der größten Schwierigkeiten, die die Arbeit mit React-Komponenten birgt, ist die Wiederverwendbarkeit von state logic zwischen einzelnen Komponenten, weil es  schwierig ist, reusable behavior an eine Komponente zu binden. Higher order components oder auch render props bieten mögliche Lösungen hierfür, machen aber eine Umstrukturierung eurer Komponenten unumgänglich. Das kann nerven. Außerdem macht es euren Code komplizierter und damit weniger clean.

Werft ihr einen Blick auf die typische React-App, werdet ihr euch mit großer Wahrscheinlichkeit in einer Hölle von Abstraktionen und Wrappern wiederfinden.

Hier setzen die Hooks an. Sie machen euren state wiederverwendbar – ohne, dass ihr die hierarchische Struktur eurer Komponenten verändern müsst. Einen Hook könnt ihr in mehreren Komponenten verwenden oder auch mit anderen Entwicklern teilen.

Struktur

Zu Beginn sind eure Komponenten wahrscheinlich grundsätzlich relativ simpel, aber irgendwann wachsen sie zu einem undurchdringbaren Chaos aus state management und verschiedenen mehr oder minder unverhofften Begleiterscheinungen heran. Klassische Lifecycle-Methoden wie beispielsweise componentDidMount und componentDidUpdate beinhalten oft eine Mischung aus an sich nicht zusammenhängenden Logiken, wie zum Beispiel eine Datenabfrage kombiniert mit mehreren Event-Listenern, die auf demselben componentDidMount angelegt sind. Cleanup (oder das Löschen der Komponente) wird schließlich durch componentWillUnmount performt. Zusammengefasst: Funktionalitäten eures Codes, die eigentlich zusammengehören, werden an unterschiedlichen Stellen behandelt, während Code, der eigentlich nichts miteinander zu tun hat, sich in einer Methode zusammengefasst wiederfindet. Die Folge: Inkonsistenter, buggy Code. Zusätzlich könnt ihr oft eure Komponenten nicht oder nur schwierig in kleinere Chunks aufteilen. Testing wird außerdem auch schwierig.

Mit React Hooks habt ihr jetzt die Möglichkeit, eure Komponenten auf Basis ihrer funktionalen Zusammenhänge in kleinere Funktionen (as in functions) aufzusplitten und seid dabei nicht mehr gezwungen, die Teilung entlang von Lifecycle-Methoden vorzunehmen.

Kein this!

Ein weiterer Punkt ist, dass this durch die Verwendung der Hooks obsolet wird, was es besonders für Coding-Neulinge zu einem Plus machen könnte, weil this einfach kompliziert ist. Man muss etwa daran denken, die Event-Handler zu binden und der Code kann ziemlich komplex werden. Die Unterscheidung von funktionalen und klassischen Komponenten und die Entscheidung, wann welche zu benutzen sind, kann sogar erfahrenen Entwicklern schwerfallen.

Langsames Refactoring

Hooks werden die Klassen in React nicht ersetzen und sind zu 100 Prozent rückwärtskompatibel. Das heißt, wenn ihr wollt, könnt ihr die Funktionalität in neuen Komponenten verwenden – ohne, dass ihr bereits existenten Code umschreiben müsst. Das Refactoring eurer Anwendung wäre wahrscheinlich ohnehin ziemlich aufwendig. Alle beteiligten Entwickler müssten sich zunächst damit vertraut machen und dazu besteht momentan keine Notwendigkeit. Auch die Entwickler hinter React selbst raten von einem umfassenden Refactoring ab. Aus dem einfachen Grund, dass mit den Hooks keine neuen Features eingeführt wurden, es handelt sich lediglich um eine neue Art und Weise, dasselbe wie vorher zu tun.

Black Box

Auch wenn es zunächst so wirkt, als machten die Hooks die Arbeit in React einfacher – kürzerer, saubererer Code, kein this, keine Klassen – also alles Dinge, die Komplexität wegnehmen würden – für Neulinge ist die neue Funktionalität nur bedingt zu empfehlen. Wer beispielsweise lernen möchte, wie useState zu verwenden ist, sollte zunächst this.state oder this.setState verstanden haben. Nur weil das this nicht mehr da ist, heißt das nicht, dass ihr nicht trotzdem wissen müsst, was dahintersteckt. Das Gleiche gilt für useEffect. Wer die Lifecycle-Methoden componentDidMount, componentDidUpdate und componentWillUnmount nicht versteht, für den wird es mit dem Effect Hook nicht einfacher.

Unser Fazit: Ihr fühlt euch sicher mit React, mit Lifecycle-Methoden und Klassen, hättet euren Code aber gern einfacher, leichter zu warten und zu lesen? Probiert es aus. Die Dokumentation ist wirklich super verständlich und deckt sowohl die gängigsten Hooks wie useState, useEffect, useContext oder useRef als auch weniger häufig genutzte wie unter anderem useReducer,  useMemo oder useCallback ab. Ihr werdet detailliert angeleitet nach welchen Regeln ihr die Hooks zu verwenden habt und schließlich, wie ihr eure eigenen schreiben könnt. Auch wenn ihr die Hooks an sich nicht braucht, allein die gute Doku macht es spannend, sich das Konzept zumindest einmal anzuschauen.

Mehr zum Thema React:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung