Integrierte React Hooks

State Hooks

Mit dem State kann sich eine Komponente Informationen wie Benutzereingaben “merken”. Zum Beispiel kann eine Formularkomponente den State verwenden, um den Eingabewert zu speichern, während eine Bildergaleriekomponente den State verwenden kann, um den ausgewählten Bildindex zu speichern.

Verwende eine dieser Hooks, um einen State zu einer Komponente hinzuzufügen:

• useState deklariert eine Zustandsvariable, die man direkt aktualisieren kann.
• useReducer deklariert eine Zustandsvariable mit der Aktualisierungslogik innerhalb einer reducer-Funktion.

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

Kontext Hooks

Kontext ermöglicht einer Komponente, Informationen von entfernten Eltern zu erhalten, ohne sie als Props weiterzugeben. So kann beispielsweise die oberste Komponente einer Anwendung das aktuelle Farbschema an alle darunter liegenden Komponenten weitergeben, egal wie tief sie sind.

• useContext liest und abonniert einen Kontext.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Ref Hooks

Refs ermöglichen einer Komponente Informationen zu halten, die nicht zum Rendern verwendet werden, z. B. einen DOM-Knoten oder eine Timeout-ID. Anders als bei einem State wird bei der Aktualisierung einer Referenz die Komponente nicht neu gerendert. Refs sind eine Ausstiegsmöglichkeit aus dem React-Paradigma. Sie sind nützlich, wenn man mit Systemen arbeiten muss, die nicht zu React gehören, wie z. B. die integrierten Browser-APIs.

• useRef deklariert eine Referenz. Du kannst jeden beliebigen Wert darin speichern, aber meistens wird es verwendet, um einen DOM-Knoten zu referenzieren.
• useImperativeHandle ermöglicht dir die Referenz zu deiner Komponente anzupassen. Diese Möglichkeit wird selten genutzt.

function Form() {
  const inputRef = useRef(null);
  // ...

Effekt Hooks

Effekte ermöglichen einer Komponente, Verbindungen zu externen Systemen herzustellen und sich mit diesen zu synchronisieren. Dazu gehören Netzwerkanfragen, Browser-DOM-Zugriffe, Animationen, Widgets, die mit einer anderen UI-Bibliothek geschrieben wurden, und anderer Nicht-React-Code.

• useEffect verbindet eine Komponente mit einem externen System.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Effekte sind eine Ausstiegsmöglichkeit aus dem React-Paradigma. Verwende keine Effekte, um den Datenfluss deiner Anwendung zu orchestrieren. Wenn du nicht mit einem externen System interagierst, benötigst du vielleicht keinen Effekt.

Es gibt zwei selten verwendete Varianten von useEffect, die sich im Ausführungszeitpunkt unterscheiden:

• useLayoutEffect wird ausgeführt, bevor der Browser den Bildschirm neu rendert. Hier kannst du das Layout messen.
• useInsertionEffect wird ausgeführt, bevor React Änderungen am DOM vornimmt. Hier können Bibliotheken dynamisches CSS einfügen.

Leistungsorientierte Hooks

Das Vermeiden von überflüssiger Arbeit ist eine gängige Methode, um die Leistung des Re-Renderns zu optimieren. React kann zum Beispiel angewiesen werden, zwischengespeicherte Berechnung wiederzuverwenden oder das Re-Rendern zu verhindern, wenn sich die Daten seit dem letzten Rendering nicht geändert haben.

Verwende eine dieser Hooks, um überflüssige Berechnungen oder Re-Renderings zu vermeiden:

• useMemo ermöglicht dir das Ergebnis einer teuren Berechnung zwischenzuspeichern.
• useCallback ermöglicht dir Funktionsdefinition zwischenzuspeichern, bevor sie an eine optimierte Komponente weitergegeben werden.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

Manchmal kann man das Re-Rendering nicht umgehen, weil der Bildschirminhalt tatsächlich aktualisiert werden muss. In diesem Fall kannst du die Leistung verbessern, indem du blockierende Aktualisierungen, die synchron sein müssen (wie die Eingabe in ein Eingabefeld), von nicht blockierenden Aktualisierungen trennst, die die Benutzeroberfläche nicht blockieren müssen (wie die Aktualisierung eines Diagramms).

Verwende eine dieser Hooks, um Renderings zu priorisieren:

• useTransition ermöglicht dir einen Zustandsübergang als nicht blockierend zu kennzeichnen und andere Aktualisierungen zuzulassen, die ihn unterbrechen.
• useDeferredValue ermöglicht dir die Aktualisierung eines nicht kritischen Teils der Benutzeroberfläche aufzuschieben und andere Teile zuerst zu aktualisieren.

Resource Hooks

Auf Ressourcen kann eine Komponente zugreifen, ohne dass sie Teil ihres States sind. Zum Beispiel kann eine Komponente eine Nachricht aus einem Promise oder Styling-Informationen aus einem Context lesen.

Um einen Wert aus einer Ressource zu lesen, verwende diesen Hook:

• use lässt dich den Wert einer Ressource wie Promise oder context lesen.

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}

Andere Hooks

Diese Hooks sind vor allem für Bibliotheksautoren nützlich und werden in der Regel nicht in Anwendungscode verwendet.

• useDebugValue ermöglicht dir die Beschriftung anzupassen, die React DevTools für deine benutzerdefinierte Hook anzeigt.
• useId ermöglicht dir einer Komponente eine eindeutige ID zuzuordnen. Wird in der Regel mit Accessibility-APIs verwendet.
• useSyncExternalStore ermöglicht einer Komponente einen externen Speicher zu abonnieren.

Deine eigenen Hooks

Du kannst auch deine eigenen Hooks als JavaScript-Funktionen definieren.