Warum React-Hooks nicht bedingt verwendet werden können und welche Alternativen es gibt

In React werden Hooks verwendet, um den Zustand in Funktionskomponenten zu verwalten und neben anderen nützlichen Funktionen den Code zu vereinfachen. Bei der Implementierung eines eigenen Hooks oder der Nutzung von Reacts eingebauten Hooks ist es jedoch wichtig, die Regeln zu verstehen, die bestimmen, wie und wann Hooks aufgerufen werden können. Eine der zentralen Regeln von React lautet, dass Hooks niemals bedingt aufgerufen werden dürfen. Dies führt uns zu einer wichtigen Erkenntnis: Die Reihenfolge, in der Hooks in einer Komponente definiert werden, ist von entscheidender Bedeutung.

Jedoch gibt es Situationen, in denen man den Zustand abhängig von einer Bedingung definieren möchte, wie etwa bei der Implementierung eines Kontrollkästchens, das die Verwendung des Namensfeldes aktivieren oder deaktivieren kann. In diesem Fall könnte man die folgende Syntax verwenden, um den Zustand des Namensfeldes bedingt zu steuern:

jsx
Copy code
const [name, setName] = enableFirstName ? useState('') : ['', () => {}]

Dies führt jedoch zu einem Problem: ESLint gibt uns eine Warnung, da React Hooks nicht bedingt aufgerufen werden dürfen. Um diese Warnung zu umgehen, deaktiviert man diese Regel, was jedoch zu einer fehlerhaften Funktionsweise führen kann. Der Grund für den Fehler ist, dass sich die Reihenfolge der Hooks ändert, wenn man bedingt einen neuen Hook einfügt. React ordnet jedem Hook eine Position im internen Hook-Array zu, basierend auf der Reihenfolge, in der sie aufgerufen werden. Wenn die Reihenfolge der Hooks durch bedingte Aufrufe verändert wird, überschreibt der neue Hook die Position eines bereits existierenden Hooks, was zu einem Zustand führen kann, in dem Daten nicht mehr korrekt verarbeitet werden.

Die Regel, dass Hooks in der gleichen Reihenfolge aufgerufen werden müssen, ist also nicht nur eine technische Einschränkung, sondern schützt die Integrität des Zustandsmanagements in React-Komponenten. Würde man diese Regel umgehen, könnten unvorhersehbare Fehler auftreten, die schwer zu debuggen sind.

Eine häufige Frage, die in diesem Zusammenhang aufkommt, ist, warum React diese Einschränkungen eingeführt hat. Warum kann man Hooks nicht bedingt aufrufen? Der Hauptgrund dafür liegt in der Funktionsweise von Reacts internem Hook-Management. React verwendet intern ein Array, um die Hooks in der Reihenfolge ihres Aufrufs zu speichern. Wenn diese Reihenfolge durch bedingte Aufrufe verändert wird, kann React nicht mehr korrekt verfolgen, welchem Zustand welcher Hook zugeordnet ist. Das führt zu den bereits beschriebenen Problemen.

Alternativen zur bedingten Verwendung von Hooks wären theoretisch denkbar, wie etwa die Benennung von Hooks und deren Speicherung in einem Objekt anstelle eines Arrays. Dies würde jedoch eine komplizierte API mit sich bringen, da jedes Hook einen eindeutigen Namen erfordern würde, was wiederum die Flexibilität und Lesbarkeit des Codes beeinträchtigen würde. Auch diese Lösung hätte ihre eigenen Probleme, da es schwieriger wäre, mit solchen benannten Hooks zu arbeiten und Konflikte zwischen den Namen zu vermeiden.

Ein weiteres Beispiel für ein solches alternatives API könnte die Verwendung von useState sein, wobei der Zustand nicht in einem Array, sondern in einem benannten Objekt gespeichert wird. Auch wenn dies technisch möglich wäre, würde die Komplexität des Codes deutlich steigen und die intuitivere Nutzung von React verlieren.

Die aktuellen Einschränkungen von React Hooks bieten also eine notwendige Struktur, die sicherstellt, dass der Zustand korrekt verwaltet wird. Dies bedeutet jedoch nicht, dass es keine Alternativen gibt. In den kommenden Kapiteln werden wir uns andere mögliche Ansätze ansehen, wie etwa die Verwendung von benutzerdefinierten Hooks oder anderen API-Methoden, um ähnliche Funktionalitäten zu erreichen, ohne die Regeln von React zu verletzen.

Wie man Benutzerkomponenten und Blog-Posts in React erstellt und verwaltet

Die erste Aufgabe ist es, eine Registrieren-Komponente zu erstellen. Diese Komponente ist fast identisch mit der Login-Komponente, unterscheidet sich jedoch durch ein zusätzliches Eingabefeld und einen anderen Text auf dem Button. Die Registrieren-Komponente wird dann in der Hauptkomponente der Anwendung (App.jsx) eingebaut, um der Anwendung die Funktionalität zu verleihen, neue Benutzer zu registrieren.

Danach folgt die Logout-Komponente. Diese Komponente wird die Möglichkeit bieten, sich abzumelden, indem sie den Namen des derzeit eingeloggenen Benutzers anzeigt und einen Button zum Abmelden bereitstellt. Hier wird die username-Eigenschaft als Prop an die Logout-Komponente übergeben, wobei diese in der Komponente zur Anzeige des Benutzernamens verwendet wird. Die Logout-Komponente rendert einen einfachen Button, der beim Klicken den Benutzer abmeldet.

Nach der Erstellung der beiden oben genannten Komponenten wird der UserBar entwickelt. Diese Komponente zeigt je nach Zustand der Benutzeranmeldung entweder die Login- und Registrieren-Komponenten oder die Logout-Komponente an. Die Verwendung von React Fragments (shorthand: <> </>) sorgt dafür, dass die Benutzeroberfläche nicht durch unnötige HTML-Elemente verschmutzt wird und die Komponenten nebeneinander gerendert werden.

In der nächsten Phase wird eine dynamische Benutzerverwaltung mit Hooks eingeführt, sodass die Benutzerinteraktionen wie das Einloggen und Abmelden ohne manuelles Bearbeiten des Codes stattfinden können. Dies ermöglicht es, den Zustand der Anwendung auf einfache Weise zu ändern, sobald der Benutzer eingeloggt ist.

Um den Prozess des Erstellens von neuen Blog-Beiträgen zu ermöglichen, wird die CreatePost-Komponente entwickelt. Diese Komponente zeigt ein Formular an, in dem der Benutzer den Titel und den Inhalt seines Beitrags eingeben kann. Der Name des Autors wird dabei automatisch mit dem Benutzernamen des eingeloggenen Nutzers gefüllt. Die PostList-Komponente schließlich wird alle erstellten Beiträge anzeigen, wobei jeder Beitrag durch die Verwendung der map-Funktion als eigenes Post-Element gerendert wird.

Die Komplexität der Post-Komponenten ist im Vergleich zu den Benutzerkomponenten relativ einfach, aber dennoch sehr wichtig für die Funktionalität einer Blog-Anwendung. Während Post nur die Darstellung eines einzelnen Beitrags übernimmt, sorgt PostList dafür, dass alle Beiträge angezeigt werden.

Es ist wichtig zu beachten, dass alle Komponenten modular und wiederverwendbar aufgebaut sind. Dies erleichtert nicht nur die Wartung und Erweiterung der Anwendung, sondern stellt auch sicher, dass neue Funktionen problemlos hinzugefügt werden können, ohne dass bestehende Funktionalitäten beeinträchtigt werden. Der Code bleibt sauber und übersichtlich, was die Skalierbarkeit der Anwendung fördert.

Die Verwendung von Props und State innerhalb der Komponenten erfordert ein gutes Verständnis von Reacts Funktionsweise. Insbesondere ist es wichtig, beim Weiterreichen von Daten zwischen den Komponenten sicherzustellen, dass alle erforderlichen Informationen korrekt übergeben werden. Auch das Konzept der Controlled Components ist von Bedeutung, wenn Formulare wie das für die Erstellung von Blog-Beiträgen genutzt werden.

Wie man React Contexts implementiert und optimal nutzt

Die Verwendung von React Contexts kann die Art und Weise, wie Daten in einer React-Anwendung weitergegeben werden, erheblich verbessern. Statt props über mehrere Komponenten hinweg weiterzureichen, ermöglicht der Context eine zentrale Verwaltung und Übergabe von Daten. Doch wie implementiert man React Contexts korrekt und wann sollte man auf alternative Lösungen zurückgreifen?

Wird jedoch ein Provider definiert, so überschreibt dieser den Standardwert und ermöglicht eine dynamische Veränderung der Context-Werte. Wenn beispielsweise der Wert des Contexts verändert wird, wird der Wert des Contexts für alle untergeordneten Komponenten im Baum aktualisiert. Dies kann nützlich sein, um Zustände wie das Design-Thema (z. B. die Farbe von Titeln) in einer Anwendung global zu steuern.

Wichtig zu beachten ist, dass, wenn kein Wert an den Provider übergeben wird, der Wert des Contexts auf undefined gesetzt wird. Dies bedeutet, dass der Context in einem solchen Fall keine nützlichen Daten liefert. Werden jedoch mehrere Provider für denselben Context verwendet, so wird der Wert des Contexts für die Komponenten, die tiefer im Baum verschachtelt sind, entsprechend angepasst. In einem Beispiel, bei dem zwei Provider verwendet werden, wird der Kontextwert je nach Nähe zum jeweiligen Provider überschrieben.

Diese Technik, mehrere Provider zu verschachteln, ist besonders nützlich, wenn Teile einer Anwendung unterschiedliche Werte für denselben Context benötigen. Beispielsweise könnte man in einer Blog-Anwendung einen "Featured Posts"-Bereich implementieren, der eine andere Farbgebung als die restlichen Beiträge verwendet. Hierfür würde man den Context für diesen Bereich überschreiben, ohne die anderen Teile der Anwendung zu beeinflussen.

Kontext ist jedoch besonders effektiv für weniger häufig ändernde Daten wie Themenwechsel (z. B. für eine "Dark Mode"-Funktionalität) oder Internationalisierungsdaten (i18n). Für solche globalen Zustände bietet der Context eine einfache Möglichkeit, diese Daten über die gesamte Anwendung hinweg zugänglich zu machen.

Ein weiteres Beispiel für die Verwendung von Contexts ist die Übergabe von Daten durch mehrere Komponenten hinweg ohne die Notwendigkeit, Props manuell durch jede Komponente zu schieben. Nehmen wir an, eine Page-Komponente hat eine headerSize-Prop, die in einer tief verschachtelten Avatar-Komponente benötigt wird. Anstatt die headerSize-Prop durch jede Ebene zu leiten, kann der Context genutzt werden, um diese Prop an alle Komponenten weiterzugeben, die sie benötigen. Auf diese Weise kann der Code eleganter und wartungsfreundlicher gestaltet werden.

Wichtig für den Leser ist, dass React Context in den richtigen Szenarien verwendet werden sollte. Zu häufiges oder falsches Verwenden kann zu Problemen führen, sowohl in Bezug auf die Leistung als auch auf die Code-Wartbarkeit. Context ist besonders nützlich für Daten, die global sind und sich nicht ständig ändern. Wenn die Daten jedoch sehr dynamisch sind, kann es besser sein, auf spezialisierte State-Management-Lösungen zurückzugreifen, die eine präzisere Kontrolle ermöglichen. Nur durch das richtige Verständnis und den gezielten Einsatz von Context können die Vorteile dieser Methode optimal ausgeschöpft werden.

Wie man eine dynamische Todo-App in React mit StateContext implementiert

Zunächst wird ein StateContext eingerichtet, um den Zustand der Todo-App zu speichern. Hierzu wird eine neue Datei StateContext.js erstellt, die die createContext-Funktion von React importiert. Dieser Context wird mit einem leeren Array initialisiert, das später die Todo-Elemente enthalten wird:

javascript
Copy code
import { createContext } from 'react';

export const StateContext = createContext([]);

javascript
Copy code
import { StateContext } from './StateContext.js';
import { fetchTodos } from './api.js';

Die App-Komponente erhält einen Konstruktor, der den Initialzustand festlegt. Anfangs gibt es noch keine Todo-Elemente, und der Filter ist auf "alle" gesetzt:

javascript
Copy code
export class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { todos: [], filteredTodos: [], filter: 'all' };
  }
}

Der componentDidMount Lifecycle-Methoden wird verwendet, um die Todo-Daten beim ersten Laden der Komponente zu laden:

javascript
Copy code
componentDidMount() {

  this.loadTodos();
}

Die loadTodos-Methode lädt die Todo-Daten und ruft anschließend die filterTodos-Methode auf, um die angezeigten Todo-Elemente zu filtern:

javascript
Copy code
async loadTodos() {
  const todos = await fetchTodos();
  this.setState({ todos });
  this.filterTodos();
}

Die Funktion addTodo erstellt ein neues Todo-Element, fügt es zum Array hinzu und filtert anschließend die angezeigten Todos:

javascript
Copy code
addTodo(title) {

  const { todos } = this.state;
  const newTodo = { id: Date.now(), title, completed: false };
  this.setState({ todos: [newTodo, ...todos] });
  this.filterTodos();
}

Mit der toggleTodo-Methode kann der Status eines Todo-Elements zwischen "abgeschlossen" und "nicht abgeschlossen" umgeschaltet werden:

javascript
Copy code
toggleTodo(id) {

  const { todos } = this.state;
  const updatedTodos = todos.map(item => {
    if (item.id === id) {
      return { ...item, completed: !item.completed };
    }
    return item;
  });
  this.setState({ todos: updatedTodos });
  this.filterTodos();
}

Das Entfernen eines Todo-Elements erfolgt mit der removeTodo-Methode, die das entsprechende Element aus dem Array entfernt:

javascript
Copy code
removeTodo(id) {
  const { todos } = this.state;

  const updatedTodos = todos.filter((item) => item.id !== id);

  this.setState({ todos: updatedTodos });
  this.filterTodos();
}

Die Filterung der Todo-Elemente wird durch die applyFilter-Methode ermöglicht, die verschiedene Filter wie "aktiv", "abgeschlossen" oder "alle" anwendet:

javascript
Copy code
applyFilter(todos, filter) {
  switch (filter) {
    case 'active':

      return todos.filter((item) => item.completed === false);

    case 'completed':
      return todos.filter((item) => item.completed === true);
    case 'all':
    default:
      return todos;
  }
}

Mit der filterTodos-Methode wird der Zustand basierend auf dem angewendeten Filter aktualisiert:

javascript
Copy code
filterTodos(filterArg) {

  this.setState(({ todos, filter }) => {
    const newFilter = filterArg ?? filter;
    return {
      filter: newFilter,
      filteredTodos: this.applyFilter(todos, newFilter),
    };
  });
}

Um die Methoden korrekt an die Komponenten weiterzugeben, muss der this-Kontext im Konstruktor neu gebunden werden:

javascript
Copy code
constructor(props) {
  super(props);

  this.state = { todos: [], filteredTodos: [], filter: 'all' };

  this.loadTodos = this.loadTodos.bind(this);
  this.addTodo = this.addTodo.bind(this);
  this.toggleTodo = this.toggleTodo.bind(this);
  this.removeTodo = this.removeTodo.bind(this);
  this.filterTodos = this.filterTodos.bind(this);
}

Nachdem die App-Komponente dynamisch gemacht wurde, geht es darum, auch die anderen Komponenten, wie die AddTodo-Komponente, dynamisch zu gestalten. Hier wird ein Zustand für das Eingabefeld definiert und Methoden zum Bearbeiten des Eingabewerts sowie zum Absenden des Formulars erstellt. Im Konstruktor wird der this-Kontext ebenfalls neu gebunden:

javascript
Copy code
constructor(props) {

  super(props);
  this.state = { input: '' };
  this.handleInput = this.handleInput.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

Die Methode handleInput behandelt Änderungen im Eingabefeld, während handleSubmit das Hinzufügen eines neuen Todo-Elements steuert. Wenn das Eingabefeld leer ist, wird der Absende-Button deaktiviert:

javascript
Copy code
handleInput(e) {

  this.setState({ input: e.target.value });

}
handleSubmit(e) {
  e.preventDefault();
  const { input } = this.state;
  const { addTodo } = this.props;
  if (input) {
    addTodo(input);
    this.setState({ input: '' });
  }
}

Der render-Teil der AddTodo-Komponente stellt sicher, dass der Eingabewert korrekt angezeigt wird und die Handhabung des Formulars funktioniert.

Wichtige Aspekte: