Anzeige
Anzeige
Ratgeber

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

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.

3 Min.
Artikel merken
Anzeige
Anzeige
Hooks bei React erleichtert das Leben. (Foto: t3n)

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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 aufzusplitten und seid dabei nicht mehr gezwungen, die Teilung entlang von Lifecycle-Methoden vorzunehmen.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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 zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

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

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige