Wie man häufige Probleme mit React Hooks löst: Bedingte Hooks und Hooks in Schleifen

Die Implementierung von Hooks in React bringt viele Vorteile mit sich, darunter eine vereinfachte Handhabung des Zustands und eine bessere Lesbarkeit des Codes. Doch wie jede neue Technologie ist auch der Umgang mit Hooks nicht ohne Herausforderungen. Ein häufiges Problem bei der Verwendung von Hooks ist ihre Anwendung unter bestimmten Bedingungen, insbesondere wenn es um bedingte Hooks oder die Verwendung von Hooks in Schleifen geht. Diese Begrenzungen erfordern kreative Lösungen, um die gewünschte Funktionalität zu gewährleisten und gleichzeitig die React-Regeln zu befolgen.

Eines der grundlegenden Probleme bei Hooks ist die Einschränkung, dass sie immer in der gleichen Reihenfolge aufgerufen werden müssen, jedes Mal, wenn eine Komponente neu gerendert wird. Andernfalls kommt es zu Fehlern oder unerwartetem Verhalten. Dies bedeutet, dass Hooks nicht innerhalb von bedingten Anweisungen wie if oder Schleifen verwendet werden können. Diese Regel sorgt zwar für Stabilität, schränkt jedoch den Entwickler in seiner Flexibilität ein. Im Folgenden werden wir untersuchen, wie diese Probleme gelöst werden können.

Bedingte Hooks

Die einfachste Lösung besteht darin, den Hook immer zu definieren, anstatt ihn bedingt zu verwenden. Auch wenn es auf den ersten Blick so aussieht, als würde dies unnötigen Code produzieren, hilft es dabei, die Regel der stabilen Reihenfolge der Hook-Aufrufe zu wahren. Ein Beispiel für diese Technik ist das immer definierte useState:

jsx
Copy code
const [name, setName] = useState('');

Dies stellt sicher, dass der Hook jedes Mal in der gleichen Reihenfolge aufgerufen wird, unabhängig von anderen Bedingungen. Wenn es jedoch notwendig ist, einen Zustand nur unter bestimmten Bedingungen zu verwenden, könnte es sinnvoller sein, die Komponenten zu teilen. So könnte man die Benutzeroberfläche in zwei Teile unterteilen, die jeweils unterschiedliche Zustände und Funktionen handhaben.

Eine solche Trennung könnte wie folgt aussehen:

jsx
Copy code
function NameField({ enabled }) {

  return enabled ? <input value={name} /> : null;
}

Auf diese Weise wird der Zustand immer definiert, aber die Anzeige des Eingabefeldes wird nur dann durchgeführt, wenn es notwendig ist.

Hooks in Schleifen

Ein weiteres häufiges Problem bei der Arbeit mit Hooks ist ihre Verwendung in Schleifen. In vielen Anwendungsfällen – beispielsweise bei der dynamischen Generierung von Formularfeldern – könnte es sinnvoll sein, für jedes neue Element in einer Schleife einen neuen Hook zu definieren. Das direkte Definieren eines Hooks in einer Schleife verstößt jedoch gegen die React-Regeln, da der Zustand in einer variablen Reihenfolge gesetzt werden könnte.

Die Lösung für dieses Problem ist, den Zustand als Array zu behandeln, anstatt für jedes Element einen eigenen Hook zu erstellen. Dies kann wie folgt umgesetzt werden:

jsx
Copy code
const [items, setItems] = useState([]);

Mit dieser Lösung verwalten wir den Zustand als Array und können dann beliebige Änderungen oder Erweiterungen vornehmen, ohne dass eine neue Instanz eines Hooks erforderlich ist. In Fällen, in denen eine feinere Steuerung notwendig ist, könnte man auch separate Komponenten für jedes Element in der Schleife erstellen, sodass jeder Teil des Codes seine eigene Logik und seinen eigenen Zustand verwaltet.

Aufteilen von Komponenten

Beispielsweise könnte man eine Benutzerinformationskomponente in zwei Teile unterteilen: eine für den Fall, dass der Benutzer eingeloggt ist, und eine für den Fall, dass er es nicht ist. So wird sichergestellt, dass der Hook nur im richtigen Kontext aufgerufen wird, ohne gegen die Reihenfolge der Hook-Aufrufe zu verstoßen:

jsx
Copy code
function LoggedInUserInfo({ username }) {

  const info = useFetchUserInfo(username);
  return <div>{info}</div>;
}
function UserInfo({ username }) {
  if (username) {

    return <LoggedInUserInfo username={username} />;

  }
  return <div>Not logged in</div>;
}

Die Trennung der Logik in kleinere, spezialisierte Komponenten macht den Code nicht nur verständlicher, sondern hilft auch, Fehler zu vermeiden und die Wiederverwendbarkeit zu erhöhen.

Fazit

Die Verwendung von React Hooks erfordert ein gutes Verständnis der zugrunde liegenden Prinzipien und Einschränkungen. Auch wenn es zunächst Einschränkungen wie das Verbot von bedingten Hooks oder Hooks in Schleifen gibt, existieren zahlreiche Lösungsansätze, die diese Probleme umgehen. Eine der wichtigsten Erkenntnisse beim Arbeiten mit Hooks ist, dass die Struktur und das Design der Komponenten eine große Rolle spielen. Wenn die Komponenten gut strukturiert und die Hooks korrekt angewendet werden, lassen sich selbst komplexe Anwendungen problemlos umsetzen.

Ein weiteres Augenmerk sollte darauf liegen, wie man wiederverwendbare und wartbare Komponenten erstellt. Indem man Funktionen wie das Aufteilen von Komponenten oder das Vermeiden unnötiger Bedingungsschleifen nutzt, kann man den Code sauber und effizient halten. Letztlich stellt sich heraus, dass React’s Einschränkungen nicht als Hindernisse, sondern als Aufforderung verstanden werden sollten, saubere und gut strukturierte Anwendungen zu erstellen.

Wie man die grundlegenden statischen Komponenten einer React-Anwendung erstellt

In der Entwicklung einer React-Anwendung ist es entscheidend, dass jedes Modul eine einzige, klar abgegrenzte Verantwortung übernimmt. Beim Entwurf einer Benutzeroberfläche (UI) beginnen wir oft mit dem Skizzieren der verschiedenen Komponenten und Unterkomponenten. Dabei ist es wichtig, dass jede Komponente eine einzige, spezifische Aufgabe erfüllt. So könnte eine Anwendung zum Beispiel Komponenten wie „Logout“ für die Abmeldung, „CreatePost“ für das Erstellen neuer Beiträge und „Post“ für die Darstellung eines Beitrags umfassen. Diese Komponenten bilden die Grundlage einer Anwendung und müssen logisch zusammengehören.

Nachdem die grundlegenden Komponenten definiert sind, geht es darum, sie in übergeordnete Container-Komponenten zu gruppieren. In einem typischen Blog könnten dies Komponenten wie „PostList“ sein, die alle Beiträge einer Seite zusammenfasst, oder „UserBar“, die Login- und Logout-Funktionen enthält. Die App-Komponente selbst ist der Container, der alle anderen Komponenten zusammenhält und die Struktur der gesamten Anwendung definiert. Durch diese modulare Struktur wird es später einfacher, die einzelnen Teile der Anwendung unabhängig voneinander zu erweitern und zu warten.

Sobald diese grundlegende Struktur skizziert ist, können wir uns der Implementierung der statischen Komponenten zuwenden. Der Vorteil der Entwicklung statischer Komponenten besteht darin, dass wir uns zu Beginn nur auf die visuelle Darstellung konzentrieren und erst später mit der dynamischen Logik und den Hooks interagieren. Dadurch erhalten wir eine klare Trennung zwischen der Präsentationsebene und der funktionalen Logik, was die Wartbarkeit und Erweiterbarkeit des Codes erheblich verbessert.

Implementierung der statischen Komponenten

Für die Login-Komponente erstellen wir ein einfaches Formular, das zwei Felder enthält: ein Feld für den Benutzernamen und ein weiteres für das Passwort. Zusätzlich fügen wir einen Button hinzu, mit dem der Benutzer das Formular abschicken kann. Der Code für die Login-Komponente könnte wie folgt aussehen:

jsx
Copy code
export function Login() {

  const handleSubmit = (e) => {
    e.preventDefault();
    // Hier könnte später die Logik für die Anmeldung eingefügt werden
  };
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Benutzername:</label>
      <input type="text" id="username" name="username" />

      <label htmlFor="password">Passwort:</label>

      <input type="password" id="password" name="password" />
      <button type="submit">Anmelden</button>
    </form>
  );
}

Hier verwenden wir semantisches HTML, was bedeutet, dass wir das label-Tag korrekt mit den Eingabefeldern verknüpfen. Dies sorgt dafür, dass Screenreader und Tastaturkürzel ordnungsgemäß funktionieren, was die Barrierefreiheit der Anwendung erhöht.

Der nächste Schritt besteht darin, diese Komponente in unserer App darzustellen. Dies geschieht, indem wir die Login-Komponente in der App.jsx-Datei importieren und einfach rendern:

jsx
Copy code
import { Login } from './user/Login.jsx';

export function App() {
  return <Login />;
}

Nun sollte die Login-Komponente auf der Webseite sichtbar sein, und wir können sicherstellen, dass sie korrekt funktioniert.

Registrierungskomponente

Die Registrierungskomponente wird der Login-Komponente ähnlich sein, aber mit einem zusätzlichen Feld zur Bestätigung des Passworts. Es könnte verlockend sein, beide Komponenten zusammenzufassen und ein zusätzliches Prop hinzuzufügen, um das zusätzliche Passwortfeld zu toggeln. Doch ist es sinnvoller, jede Komponente ihre eigene Aufgabe erfüllen zu lassen. Auf diese Weise können wir später die Logik für Registrierung und Anmeldung getrennt voneinander behandeln.

Der Code für die Registrierungskomponente könnte folgendermaßen aussehen:

jsx
Copy code
export function Register() {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Hier könnte später die Logik für die Registrierung eingefügt werden
  };
  return (
    <form onSubmit={handleSubmit}>

      <label htmlFor="username">Benutzername:</label>

      <input type="text" id="username" name="username" />
      <label htmlFor="password">Passwort:</label>
      <input type="password" id="password" name="password" />

      <label htmlFor="repeatPassword">Passwort wiederholen:</label>

      <input type="password" id="repeatPassword" name="repeatPassword" />
      <button type="submit">Registrieren</button>
    </form>
  );
}

Im Vergleich zur Login-Komponente haben wir hier ein weiteres Passwortfeld hinzugefügt. Auch hier stellen wir sicher, dass jedes Feld richtig gekennzeichnet ist, um eine optimale Benutzererfahrung zu gewährleisten.

UserBar-Komponente

Die UserBar-Komponente ist eine Container-Komponente, die je nach Login-Status entweder die Login- oder die Logout-Komponente anzeigt. Wenn der Benutzer eingeloggt ist, wird der Logout-Button angezeigt, andernfalls erscheinen die Buttons für Login und Registrierung. Diese Komponente ist besonders nützlich, um die Darstellung der Benutzeroberfläche basierend auf dem aktuellen Anmeldestatus zu ändern. Die UserBar könnte folgendermaßen umgesetzt werden:

jsx
Copy code
export function UserBar() {

  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const handleLogin = () => setIsLoggedIn(true);

  const handleLogout = () => setIsLoggedIn(false);

  return (
    <div>
      {isLoggedIn ? (
        <button onClick={handleLogout}>Abmelden</button>
      ) : (
        <>

          <button onClick={handleLogin}>Anmelden</button>

          <button>Registrieren</button>
        </>
      )}
    </div>
  );
}

Durch die Nutzung von useState und einfachen Event-Handlern können wir den Anmeldestatus dynamisch steuern und die Benutzeroberfläche entsprechend anpassen.

Wichtig zu beachten

Es ist entscheidend, die statischen Komponenten nicht zu unterschätzen. Sie bilden die Grundlage jeder Webanwendung und schaffen ein solides Fundament, auf dem später die dynamische Logik aufgebaut werden kann. Darüber hinaus hilft der schrittweise Ansatz dabei, das Projekt von Anfang an gut strukturiert zu gestalten. Indem man sich zunächst auf die Darstellung konzentriert und später die Logik hinzufügt, vermeidet man unnötige Umstrukturierungen und sorgt für eine saubere Trennung von Zuständigkeiten.

Die Implementierung der statischen Komponenten ist daher nicht nur ein technischer Schritt, sondern auch ein strategischer Ansatz, um spätere Erweiterungen und Anpassungen zu vereinfachen. Wenn diese Komponenten einmal stehen, ist es deutlich einfacher, die dynamischen Aspekte der Anwendung zu integrieren und die Benutzererfahrung zu verbessern.

Wie man eine vollständige REST API mit json-server und Vite aufsetzt und konfiguriert

Um eine funktionierende Entwicklungsumgebung zu erstellen, die sowohl Frontend- als auch Backend-Komponenten umfasst, können wir den json-server und Vite in Kombination verwenden. Dabei erstellen wir eine REST API aus einer JSON-Datei und konfigurieren die Scripts im package.json, um beide Teile gleichzeitig zu starten. Dies ermöglicht es, eine effiziente Entwicklungsumgebung zu schaffen, in der sowohl der Server als auch der Client nahtlos zusammenarbeiten.

json
Copy code
"scripts": {
  "dev:server": "json-server server/db.json --port 5174"
}

Im nächsten Schritt wird das ursprüngliche dev-Script zu dev:client umbenannt:

json
Copy code
"scripts": {

  "dev:server": "json-server server/db.json --port 5174",
  "dev:client": "vite"
}

Es ist wichtig, die Änderungen in der package.json zu speichern, um sicherzustellen, dass sie nicht durch zukünftige npm-Installationen überschrieben werden.

Danach installieren wir ein weiteres Tool, das es uns ermöglicht, sowohl den Server als auch den Client parallel zu starten: concurrently. Dieses Tool sorgt dafür, dass beide Prozesse gleichzeitig laufen:

bash
Copy code
npm install --save-dev --save-exact [email protected]

Nun fügen wir ein weiteres Script hinzu, das die concurrently-Befehlszeile verwendet, um beide Prozesse zu starten:

json
Copy code
"scripts": {

  "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\""
}

Nach diesen Änderungen kann der Entwicklungsprozess mit folgendem Befehl gestartet werden:

bash
Copy code
npm run dev

Dies startet sowohl den Server als auch den Client gleichzeitig. Zu diesem Zeitpunkt läuft der Server auf Port 5174 und der Client auf Port 5173, sodass beide ohne Konflikte nebeneinander existieren können.

Dazu bearbeiten wir die Datei vite.config.js und fügen eine Proxy-Konfiguration hinzu, die den /api-Pfad an den Server weiterleitet:

javascript
Copy code
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(import.meta.dirname, 'src') },
    ],
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5174',

        rewrite: (path) => path.replace(/^\/api/, ''),

      },
    },
  },
});

Mit dieser Konfiguration wird jede Anfrage an http://localhost:5173/api/... an den Server auf http://localhost:5174/... weitergeleitet. Nachdem der Server und der Client neu gestartet wurden, ist der Proxy aktiv und ermöglicht eine problemlose Kommunikation zwischen beiden. Eine Anfrage an http://localhost:5173/api/posts/1 wird nun korrekt vom Server beantwortet, aber unter dem /api-Pfad.

Um nun Daten vom Backend zu laden, müssen wir auf React-Hooks zurückgreifen. Ein gängiges Muster ist die Verwendung des useEffect-Hooks, um Daten zu laden, und des useReducer-Hooks, um die Daten im Zustand zu speichern. Dieser Ansatz ist besonders nützlich, wenn es darum geht, komplexe Zustände zu verwalten.

Zuerst definieren wir einen neuen FETCH_POSTS-Action-Typ im Reducer, um die Posts vom Server zu speichern:

javascript
Copy code
export function postsReducer(state, action) {

  switch (action.type) {
    case 'CREATE_POST':
      return [action.post, ...state];
    case 'FETCH_POSTS':
      return action.posts;
    default:
      throw new Error('Unknown action type');
  }
}

javascript
Copy code
import { useState, useReducer, useEffect } from 'react';
export function App() {
  const [posts, dispatch] = useReducer(postsReducer, []);
  const [username, setUsername] = useState('');
  useEffect(() => {
    fetch('/api/posts')
      .then((response) => response.json())

      .then((posts) => dispatch({ type: 'FETCH_POSTS', posts }));

  }, []);
}

Der nächste Schritt ist, die Posts nach ihrem "Featured"-Status zu filtern und die Posts an das PostList-Komponenten weiterzugeben. Dabei verwenden wir die filter-Methode, um die Featured-Posts und die regulären Posts zu trennen und diese in umgekehrter Reihenfolge anzuzeigen, sodass die neuesten zuerst kommen:

javascript
Copy code
const featuredPosts = posts.filter((post) => post.featured).reverse();

const regularPosts = posts.filter((post) => !post.featured).reverse();

Am Ende starten wir den Server und den Client erneut mit:

bash
Copy code
npm run dev

Wenn die App jetzt unter http://localhost:5173/ läuft, wird sie mit den aus der JSON-Datei geladenen Posts gefüllt. Jede Änderung in der db.json wird sofort in der App sichtbar, was den Entwicklungsprozess erheblich vereinfacht.

Eine wichtige Anmerkung betrifft die Funktionsweise von React im Entwicklermodus: React führt in diesem Modus Komponenten zweimal aus, um potentielle Nebeneffekte wie vergessene Aufräumaktionen zu erkennen. Dies führt dazu, dass in der Entwicklerkonsole zwei GET-Anfragen gesendet werden. Im Produktionsmodus wird die Komponente nur einmal gerendert, und es erfolgt nur eine GET-Anfrage.

javascript
Copy code
async function fetchPosts() {

  const response = await fetch('/api/posts');

  const posts = await response.json();
  return posts;
}

Es ist wichtig, diese Konzepte zu verstehen und zu beherrschen, um eine effiziente und skalierbare React-Anwendung zu entwickeln, die sowohl mit lokalen als auch mit externen APIs kommunizieren kann.

Wie implementiert man Debouncing in einem Post-Editor mit dem History State Hook?

Die Implementierung von Debouncing in einer React-Anwendung hat das Ziel, unnötige Überlastungen zu vermeiden, die durch ständige Aktualisierungen bei Benutzereingaben entstehen. Eine der häufigsten Anwendungen für Debouncing ist die Steuerung von Eingabefeldern, bei denen Benutzer in Echtzeit Text eingeben und Änderungen kontinuierlich an den Zustand der Anwendung übergeben werden. In diesem Zusammenhang lässt sich Debouncing besonders effektiv mit dem History State Hook kombinieren, um eine effiziente Verwaltung der Benutzerhistorie zu erreichen.

In einem typischen Szenario, in dem Text in ein Eingabefeld eingegeben wird, könnte jede einzelne Änderung des Textes sofort den Zustand aktualisieren. Doch dieses Verhalten führt dazu, dass der Zustand kontinuierlich verändert wird, was zu unnötigen Re-Renders und Leistungseinbußen führen kann. Hier setzt Debouncing an: Anstatt den Zustand sofort bei jeder Änderung zu aktualisieren, wird die Aktualisierung verzögert und nur dann vorgenommen, wenn für eine bestimmte Zeit keine weiteren Änderungen eintreten.

Zu Beginn benötigen wir die Funktion useDebouncedCallback aus der use-debounce-Bibliothek. Diese erlaubt es uns, eine Rückruffunktion zu erstellen, die nach einer festgelegten Verzögerung aufgerufen wird. Beispielweise kann der Code wie folgt aussehen:

javascript
Copy code
const [text, setText] = useState('')

const [debouncedSet, cancelDebounce] = useDebouncedCallback(
  (value) => setText(value),
  1000
)

Hier definieren wir zwei Variablen: debouncedSet und cancelDebounce. Die erste Funktion aktualisiert den Zustand text nur nach einer Verzögerung von 1000 Millisekunden, während cancelDebounce es ermöglicht, die Verzögerung zu stoppen, falls eine neue Änderung vor Ablauf der Frist erfolgt.

1. Wir kopieren den Inhalt des ursprünglichen Ordners Chapter10_1 in einen neuen Ordner Chapter10_2 und öffnen ihn in unserem Code-Editor.

2. Danach installieren wir die use-debounce-Bibliothek mit dem folgenden Befehl:

bash
Copy code
$ npm install --save-exact [email protected]

3. In der Datei src/components/post/CreatePost.jsx importieren wir die notwendigen Hooks:

javascript
Copy code
import { useState, useEffect } from 'react'

import { useDebouncedCallback } from 'use-debounce'

4. Anschließend definieren wir einen neuen Zustand, der den Text des Editors speichert, sowie den History State:

javascript
Copy code
const { state, set, undo, redo, clear, canUndo, canRedo } = useHistoryState('')
const [content, setContent] = useState('')

5. Dann erstellen wir einen Debounced Callback Hook, der den Zustand nach einer Verzögerung von 200 Millisekunden aktualisiert:

javascript
Copy code
const debounced = useDebouncedCallback((value) => set(value), 200)

6. Im nächsten Schritt verwenden wir einen useEffect-Hook, um sicherzustellen, dass der debounced-Callback nicht durch laufende Änderungen überschrieben wird und der Inhalt mit dem Wert des History State synchronisiert wird:

javascript
Copy code
useEffect(() => {
  debounced.cancel()
  setContent(state)
}, [state, debounced])

7. Wir passen den Event-Handler an, sodass beim Ändern des Textes sowohl der kontrollierte Zustand als auch der debounced Callback aktualisiert werden:

javascript
Copy code
function handleContentChange(e) {

  const { value } = e.target
  setContent(value)
  debounced(value)
}

8. Schließlich stellen wir sicher, dass das Textarea den Wert von content verwendet, anstatt direkt auf den state zuzugreifen.

Nach der Implementierung dieses Codes funktioniert der Editor so, dass beim Tippen der Text sofort angezeigt wird, aber der Zustand der History nur dann gespeichert wird, wenn 200 Millisekunden lang keine Änderungen mehr auftreten. Das ermöglicht eine flüssige Benutzererfahrung und verhindert unnötige Zustand-Updates.

Ein wichtiger Aspekt, den Entwickler verstehen sollten, ist der Unterschied zwischen debounced und deferred Werten. Während Debouncing auf einer festen Verzögerungszeit basiert, bei der der Wert nur nach einer bestimmten Zeitspanne ohne Änderungen aktualisiert wird, ist das Deferred-Verhalten dynamischer. Bei der Deferred-Logik wird der Wert nach jeder Änderung weiterhin versucht zu aktualisieren, allerdings nur dann, wenn die Anforderungen schnell genug verarbeitet werden können.

Es ist auch wichtig, zu bedenken, dass beim Arbeiten mit History States und Debouncing eine zusätzliche Vorsicht bei der Handhabung von Undo/Redo-Funktionen erforderlich ist. Wenn der Zustand nicht rechtzeitig oder zu spät gespeichert wird, könnte dies zu unvorhersehbaren Ergebnissen führen. Die Verwendung von Debouncing in Kombination mit einer gezielten Implementierung von cancel()-Funktionen hilft dabei, diese Probleme zu minimieren und die Benutzererfahrung zu verbessern.