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 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.
