Wie funktionieren Hooks in React Native und wann einsetzen?

24 Haz 00:23

useState ist im Kern nur ein Wrapper um ein internes Array‑Slot, das bei jedem Render einen neuen Wert zurückgibt. Der Hook speichert den State in einer sogenannten „Fiber“, also einer Datenstruktur, die React Native pro Component-Instanz führt. Beim Aufruf von setState wird das aktuelle Fiber‑Objekt markiert und beim nächsten Commit‑Phase ein neues Render‑Tree erzeugt – genau wie bei class‑basierten setState, nur dass hier kein this‑Binding nötig ist. useEffect funktioniert ähnlich: React legt für jede Component‑Instanz eine Liste von Effekt‑Einträgen an. Nach dem Render wird das Layout‑Phase‑Queue abgearbeitet und die Callback‑Funktion erst dann ausgeführt, wenn das UI gemountet ist. Durch das Cleanup‑Return‑Fn kann man Ressourcen (z. B. Event‑Listener oder Timer) wieder freigeben, was gerade in mobilen Apps wichtig ist, um Speicher‑Leaks zu vermeiden. Der große Vorteil gegenüber Klassenkomponenten ist die klare Trennung von Logik – man kann mehrere useState‑ oder useEffect‑Aufrufe kombinieren, ohne eine tiefe Vererbungshierarchie zu bauen. Außerdem spart man Boiler‑Plate wie constructor und componentDidMount / componentWillUnmount. Ein häufiger Stolperstein ist jedoch das falsche Setzen von Abhängigkeiten im Dependency‑Array von useEffect: Wenn man dort etwas vergisst, bleibt ein Netzwerk‑Call oder ein Listener aktiv, was zu unnötigem Akku‑Verbrauch führen kann. Auch asynchrone Vorgänge sollten immer mit einem Cancel‑Flag oder einem AbortController abgesichert werden, weil React das Rendering fortsetzt, selbst wenn das Promise später resolves. In meiner letzten App habe ich deshalb alle fetch‑Calls in einem useEffect gekapselt und das Abort‑Signal im Cleanup zurückgegeben – das hat das „ghost‑request“-Problem komplett eliminiert. Insgesamt empfehle ich, Hooks für neue Features zu verwenden und nur dann zu Class‑Components zurückzugreifen, wenn man sehr komplexe Lifecycle‑Logik hat, die sich nicht sauber in mehrere Effekte zerlegen lässt.