React Hooks Grundlagen

Hooks sind spezielle Funktionen in React, die es dir ermöglichen, deinen Code einfacher und übersichtlicher zu gestalten. Sie wurden eingeführt, um die Entwicklung mit React zu vereinfachen und mehr Funktionalitäten in deinen Komponenten zu nutzen.

Warum Hooks verwenden?

• Wiederverwendbarkeit: Sie können eigene Hooks erstellen und sie in verschiedenen Komponenten einsetzen
• Bessere Codeorganisation: Verwandte Logik kann zusammengehalten werden
• Weniger Code: Hooks reduzieren die Menge an Code, die Sie schreiben müssen
• Einfacher zu verstehen: Funktionale Komponenten mit Hooks sind oft leichter zu lesen wiederverwenden

Die wichtigsten Hooks

1. useState

Der useState Hook ermöglicht es dir, Daten zu speichern und zu aktualisieren. Er ist perfekt für Werte, die sich über die Zeit ändern können.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // Startwert ist 0

  return (
    <div>
      <p>Du hast {count} mal geklickt</p>
      <button onClick={() => setCount(count + 1)}>Klick mich</button>
    </div>
  );
}

Hier passiert Folgendes:

• useState(0) erstellt eine State-Variable mit dem Anfangswert 0
• Es gibt ein Array mit zwei Elementen zurück: den aktuellen Wert und eine Funktion, um diesen Wert zu ändern
• Jedes Mal, wenn Sie setCount aufrufen, wird die Komponente neu gerendert

2. useEffect

Der useEffect Hook ermöglicht dir, bestimmte Aktionen auszuführen, nachdem deine Komponente auf dem Bildschirm erscheint oder sich ändert. Diese Aktionen werden auch als “Effekte” oder “Seiteneffekte” bezeichnet.

Mit useEffect können Sie Daten von einem Server laden, Ereignislistener hinzufügen, den Dokument-Titel ändern, Timer starten oder stoppen und viele andere Aktionen ausführen, die ausserhalb des normalen Rendervorgangs stattfinden.

import { useState, useEffect } from "react";

function PageTitle() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Dieser Code wird nach dem Rendern ausgeführt
    document.title = `Du hast ${count} mal geklickt`;

    // Optionale Aufräumfunktion
    return () => {
      document.title = "React App";
    };
  }, [count]); // Nur erneut ausführen, wenn sich count ändert

  return <button onClick={() => setCount(count + 1)}>Klick mich</button>;
}

Wichtige Punkte:

• Der erste Parameter ist eine Funktion, die ausgeführt wird
• Der zweite Parameter ist ein Array von Werten, die bestimmen, wann der Effekt ausgeführt wird
• Ein leeres Array [] bedeutet, dass der Effekt nur einmal nach dem ersten Rendern ausgeführt wird
• Wenn Sie den zweiten Parameter weglassen, wird der Effekt nach jedem Rendern ausgeführt
• Die optionale Rückgabefunktion wird ausgeführt, bevor die Komponente entfernt wird oder bevor der Effekt erneut ausgeführt wird

3. useContext

Mit useContext können Sie auf Daten zugreifen, die von einem übergeordneten Component über einen “Context Provider” zur Verfügung gestellt werden.

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      Im aktuellen Theme gestylt
    </button>
  );
}

Dieser Hook ist sehr nützlich, um Daten wie Benutzereinstellungen, Authentifizierungsstatus oder Themes an alle Komponenten weiterzugeben, ohne sie durch mehrere Ebenen durchreichen zu müssen.

4. useRef

Mit useRef können Sie eine veränderbare Referenz erstellen, die während der gesamten Lebensdauer der Komponente bestehen bleibt:

import { useRef } from "react";

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // `current` zeigt auf das Eingabefeld
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Eingabefeld fokussieren</button>
    </>
  );
}

Besonders nützlich für:

• Direkten Zugriff auf DOM-Elemente
• Speichern von Werten, die sich nicht auf das Rendering auswirken sollen

Eigene Hooks erstellen

Sie können eigenen Hooks erstellen, um Logik zwischen verschiedenen Komponenten wiederzuverwenden. Eigene Hooks beginnen immer mit “use”:

import { useState, useEffect } from "react";

// Eigener Hook für die Fenstergrösse
function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener("resize", handleResize);

    // Aufräumen
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
}

// Verwendung des eigenen Hooks
function ResponsiveComponent() {
  const size = useWindowSize();

  return (
    <div>
      Fenstergrösse: {size.width} x {size.height}
    </div>
  );
}

Regeln für Hooks

Es gibt zwei wichtige Regeln, die Sie beachten sollten:

1. Verwende Hooks nur auf der obersten Ebene deiner Komponente

   • Nicht in Schleifen, Bedingungen oder verschachtelten Funktionen
   • Dadurch wird sichergestellt, dass Hooks bei jedem Rendern in derselben Reihenfolge aufgerufen werden

2. Verwende Hooks nur in React-Funktionskomponenten oder in eigenen Hooks

   • Nicht in normalen JavaScript-Funktionen

// ✅ Richtig
function MyComponent() {
  const [count, setCount] = useState(0);
  // ...
}

// ❌ Falsch: in einer Bedingung
function MyComponent() {
  if (condition) {
    const [count, setCount] = useState(0);
  }
  // ...
}

Zusammenfassung

Hooks sind ein mächtiges Werkzeug in React, das deinen Code:

• Einfacher macht
• Besser organisiert
• Leichter wiederzuverwenden lässt
• Verständlicher macht

In unserem Bücher-Projekt werden wir verschiedene Hooks einsetzen, um State zu verwalten, Daten zu laden und vieles mehr.