React Hooks

React Hooks ermöglichen den Einsatz von States in Function Components

---

In React kennen wir zwei Typen von Components:

• Function Components = Stateless Components.

• Class Components = Stateful Components.

Eine Function Component renderd Elemente, wie z.B. eine Headline, einen Button u.v.m. Das selbe macht eine Class Component, allerdings kann Sie Zustände (States) erzeugen und verwalten. Damit können wir interaktive UI's entwickeln. Nun ist es häufig so, dass Function Components entwickelt werden, da zu diesem Zeitpunkt kein State benötigt wird. Später stellt sich aber heraus, dass ein State doch eine gute Idee ist.

Dann muss die Component neu entwickelt werden und zwar als Class Component. Das ist nervig und zeitaufwendig. Das gilt noch mehr für Scrivito-Widgets. Wäre es nicht schön, wenn wir einfach eine Function Component erweitern könnten, um aus ihr eine stateful Component zu machen?

Genau das ist mit React Hooks möglich. Die folgende einfache Komponente renderd eine Headline. Fügt man einen Hook, hier useState, hinzu, hat man eine Stateful Function Component. Das Beispiel ist ziemlich sinnfrei, zeigt aber wie einfach es ist. React Hooks wurden in der Version 16.8 eingeführt. Class Components gibt es weiterhin. Man muss jetzt also nicht alles umschreiben. Aber bei neuen Stateful Components würde ich React Hooks einsetzen.

Das ist alles viel einfacher und mit weniger Zeilen Code, als mit Class Components und setState zu bewerkstelligen.

Außer useState gibt es noch die Hooks:

• useEffect

• useContext

• useReducer

• useCallback

• useMemo

• useRef

• useImperativeHandle

• useLayoutEffect

• useDebugValue

Hier werden sie detailliert beschrieben.