React Hooks erklärt – der Guide zu wiederverwenbarer React Logik

React Hooks

Am 06. Februar 2019 wure die Version 16.8 von React released und darin enthalten war eine große Neuerung – die Hooks. Doch was sind Hooks? Unnd wie funktionieren sie? All diese Fragen klären wir in diesem Beitrag und ich zeige dir wie du deine eigenen Hooks erstellen kannst.

React Hooks definiert – was ist das eigentlich?

Was sind Hooks? – Bei React Hooks handelt es sich um wiederverwendbare Logik die in Abhängigkeit zu States steht. Das wort Hook leitet sich hier aus dem Englischen ab: ‚to hook into something‘ – bei etwas einharken. Also ist die Hook unser Haken um an einer bestimmten Code stelle einzuharken.

Wozu das gut ist? Nun das hilft uns unseren Code übersichtlich und möglichst kurz zu halten. Immerhin können wir nun ein und den selben Code immer und immer wieder verwenden wenn wir diese Aktion durchführen wollen und müssen ihn nicht kopieren und einfügen. Zeit für ein Beispiel… stell dir vor du hast in deiner App einen State der ein Array ist und musst nun darauf zugreifen. Nicht gerade unwahrscheinlich, dass das passiert.. Jetzt hast du verschiedene Aktionen die du hier durchführen kannst. Du kannst ein bestimmtes Element löschen, ersetzen, ein neues Hinzufügen oder nur einzelne Werte eines Elementes ändern. In jedem Fall musst du erstmal darauf zugreifen und dieses Element suchen. Oft ist es so das diese Änderungen über verschiedene Components möglich sind. Hier kommen die React Hooks ins Spiel. Durch Hooks kannst du nun immer auf diese eine Funktion zugreifen ohne diese Logik immer und immer und immer wieder schreiben zu müssen… praktisch, oder?

Die goldenen Regeln für React Hooks

Das Hooks so funktionieren wie sie sollen gibt es ein paar Regeln die du zu beachten hast. Um bei der Entwicklung nicht versehentlich diese Regeln zu verletzen, gibt es ein ESLint plugin (eslint-plugin-react-hooks) das auf die Einhaltung der regeln prüft.

Nur auf dem Top-Level

Wäre es nicht ziemlich ungünstig wenn die Hooks immer in unterschiedlicher Reihenfolge aufgerufen werden würden oder der State nicht identisch bleibt? Ja? Das denke ich auch. Um sicherzustellen das nichts davon passiert dürfen React Hooks nur auf der Top-Level Ebene angesiedelt werden. Für dich heißt das: baue keine Hooks in Verzweigungen, Schleifen oder verschachtelten Funktionen ein.

Keine JavaScript Funktionen!!

React Hooks dürfen auschließlich in React Funktion Components oder eigenen Hooks aufgerufen werden, niemals in normalen JavaScript Funktionen.

Eigene React Hooks erstellen – Erklärung

Eine eigene Hook in React zu erstellen ist gar nicht so schwer. Vorweg: Am besten erstellst du dir eine eigene Datei in der du deine Hooks bündelst. Merke dir folgende Konvention: React Hooks beginnen immer mit ‚use‘. Das ESLint Plugin das die Einhaltung der Regeln prüft benötigt diese Konvention.

Eine eigene Hook ist nicht viel mehr als eine Funktion, die einen oder mehrere States hat, damit etwas macht und dann das was gesucht wurde zurückgibt.

Manchmal macht es die Verwendung von Hooks aber nicht unbedingt leichter. Es bietet sich dann an einen Reducer zu verwenden. Was das ist erkläre ich dir demnächst.