In diesem Artikel werde ich versuchen, die möglichen Best Practices vorzustellen, die mit React Hooks machbar sind , um React Hooks als Entwickler in zukünftigen Projekten besser verwenden zu können.

Hierzu ist ein Grundverständnis in reactJs erforderlich.

Warum sollten ReactHooks verwendet werden ?

React ab V16.8 enthält Hooks und ermöglicht das Verwalten von Status- und anderen React-Funktionen, ohne das eine Klasse erforderlich ist.

Können wir nicht einfach weiterhin Klassen verwenden? Ja, geht zweifelsohne, allerdings sollte es wohlüberlegt sein,denn mit Functional Components geht einiges besser:

• Einfache Trennung von Container- und Präsentationskomponenten
• Besser lesbare und testbare Komponenten.
• weniger Code erforderlich.
• Performance-Boost ?

React bietet Entwicklern bereits vordefinierte, integrierte Hooks wie useState, useEffect, useContext … und bietet zusätzlich die Möglichkeit auch eigene Hooks zu erstellen (dazu später mehr in einem separaten Artikel) .

Zunächst einige Beispiele, die sich auf useState und useEffect Hooks konzentrieren. Die gleichen Regeln sind auch auf die anderen Hooks anwendbar.

import React, { useState } from 'react'; // Aufruf des useState Hook

const EinfacheKomponente1 = () => { // Hooks in funktionalen Komponenten 
  const [count, setCount] = useState(0) //Initialisierung
  return (
    <div>
      <p>Klick Anzahl : {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Klick mich     
      </button>
    </div>
  )
}

ReactDOM.render(<EinfacheKomponente1 />, document.getElementById('app'))

Der obige Code zeigt die Verwendung von useState Hooks. Im Beispiel handelt es sich um eine einfache Komponente, mit der der Benutzer eine Zahl (Counter) erhöhen kann, wenn das Klickereignis ausgelöst wird. Ohne Verwendung von Hooks könnten wir etwas Ähnliches schreiben (mittels class-based-components, siehe den folgenden Code), um die Werte zu initialisieren dient dann der Konstruktor innerhalb der Klasse:

this.state = {
   count:0 
}

Wenn der useState-Hook verwendet wird, ist die Initialisierung in functional Components wie folgt machbar:

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

Das Klickereignis hat die useState-Funktion ausgelöst, die den Counter erhöht.

Das gleiche Problem könnte gelöst werden, wenn wir Klassen verwenden, allerdings dann mit mehr Code.
Wenn wir uns vorstellen, dass die Komplexität der zuverwaltenden states immer größer wird, wird es dann schnell unübersichtlich ?‍♂️

Die Verwendung von Hooks kann allerdings auch zu Komplexität führen.

Ziel dieses Artikels ist es, zu zeigen, dass mit wenigen Schritten komplexe Apps erstellt und deren Komplexität mithilfe von Hooks? verwaltet werden können.

Nun wollen wir sehen, wie wir dieses Ziel erreichen können.

Basierend auf der React-Doku zu Hooks sind nur einige wenige Regeln zu befolgen, um mit dem Schreiben von Hooks-basierten Apps beginnen zu können.

1. Wo Hooks verwenden und in welcher Reihenfolge ?

Zum Wo sind folgende Regeln wichtig. Hooks werden niemals aufgerufen in:

✔ Klassenkomponenten
✔ Event Handler 
✔ Loops
✔ in Funktionen, die an useMemo, useReducer, or useEffect übergeben werden
✔ in nicht-React Funktionen

if (true) { // der useEffect hook wird in Bedingung aufgerufen ?
  useEffect(myFunction() => {
    console.log('hier rendern')
  });
}

Jetzt haben wir gelernt, wo wir Hooks nicht aufrufen dürfen.
Die erste Regel besteht darin, die Aufruf-Reihenfolge zu respektieren und Hooks stets in der obersten Ebene der Funktionskomponente aufzurufen. Im Klartext bedeutet dies: React muss wissen, dass Hooks immer in derselben Reihenfolge aufgerufen werden und nicht von Bedingungen oder Schleifen beim Rendern abhängen.

Die Verwendung von React-Hooks unter Beachtung der React-Regeln sollte dann zB ungefähr so aussehen:

const einfacheKomponente2 = () => { 
  const [count, setCount] = useState(0) ✔
  const [name, setCount] = useState('') ✔
  useEffect(() => { ✔
    document.title = `Du hast mich ${count} mal geklickt.`;
  });
}

Für die diejenigen, die mehr wissen möchten, zB warum die Reihenfolge so wichtig ist und was sich hinter den Kulissen so tut, und auch mehr über verknüpfte Listen und Datenstrukturen wissen möchten,gibt es hier eine gute und weiterführende Erläuterung.

2.  React-Hooks nur innerhalb von React-Functional-Components verwenden

React- Funktionskomponenten und Javascript-Funktionen sind nicht dasselbe. Das Aufrufen von Hooks innerhalb einer js-Funktion ist nicht möglich. Funktionale React-Komponenten akzeptieren props als Argumente und geben JSX zurück, selbst wenn sie denselben body und dieselbe Struktur wie eine einfache Javascript-Funktion haben. ?‍♀️

import { useState } = "react";

const sagHallo(name) => {
  const [name, setName] = useState("Franz");
  return console.log(`Hallo ${name}`);
}
document.getElementById("root").innerHTML = sagHallo;

Der useState Hook ist hier unbrauchbar, da es sich nicht um eine React- Funktions-Komponente handelt.

3. React CustomHooks – benutzerdefinierte Hooks

Benutzerdefinierte Hooks sind eine neue Methode, womit die Flexibilität geboten wird, Logik zu teilen, was in React-Komponenten zuvor nicht möglich war. Es kann verwendet werden, um viele Anwendungsfälle wie das Abrufen von Daten, komplexe Animationen, deklarative Abonnements, Timer usw. abzudecken.

Benutzerdefinierte Hooks bedeuten weniger Code. und weniger sich wiederholende Blöcke.

Stellen wir uns vor, wir verwenden eine Komponente, die einen sehr komplexen großen State verwendet. Der gleiche State wird möglicherweise von anderen Komponenten gemeinsam genutzt. Wenn der State größer wird, ist es sehr schwierig, seine logische Komplexität zu verwalten.

Die Verwendung vieler setState in der Funktionskomponente macht das Aktualisieren des State nicht zentral und einfacher. Daher kommt auch die Idee der -Reducer-  ?, das Erstellen eines benutzerdefinierten useReducer-Hooks löst dieses Problem für viele andere Komponenten.

Erstellen wir einen einfachen benutzerdefinierten Hook, der einen Titel anzeigt. Unser Hook befindet sich in einer separaten Datei und sieht folgendermaßen aus:

const useTitle= (title) => {
  useEffect(() => {
    document.title = title;
  }, [title])
}

Wie wir sehen können, ist ein benutzerdefinierter Hook eine Funktion, die mit use beginnt und einen anderen Hook im Inneren verwenden kann ? und natürlich kann dieser Hook überall angewendet werden !!  ?

import React, { Component, useState } from 'react';
 import useTitle from './myHooks/usetitle'; // benutzerdefinierter Hook

 const Counter() => {
    const [count, setCount] = useState(0);
    const incrementCount = () => setCount(count + 1);
    useTitle (`You clicked ${count} times`);

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={incrementCount}>Click me</button>
      </div>
    )
  }

  export default Counter;

Vorstellbar ist zB  einen useLocalStorageHook zu erstellen, um den lokalen Speicher zu verwalten, useValidDataHook zu verwenden, um ein Formular zu validieren … und vieles mehr!
Damit wäre ein wesentlich sauberer und zentralisierter Code möglich ?.

4. Code-Linter verwenden !

Um lästige Konflikte beim Coding zu vermeiden, sollte ein esLint-Plugin verwendet werden, um sicherzustellen, dass alle oben genannten Regeln angewendet werden. Insbesondere wenn im Team gearbeitet wird.

create-react-app (CRA) enthält bereits das Plugin, anderenfalls kann es wie folgt installiert werden:

npm install eslint-plugin-react-hooks --save-dev

Folgende Konfiguration sollte in der esLint-Konfigurationsdatei enthalten sein, um die o.a. Regeln im Linter zu aktivieren:

// ESLint Konfiguration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Überprüft Hook-Regeln
    "react-hooks/exhaustive-deps": "warn" // Überprüft effects-deps.
  }
}

Zusammenfassung

Ich habe in diesem Artikel versucht, die wichtigsten Regeln für Entwickler aufzulisten, die bereit sind, im nächsten Projekt React-Hooks zu verwenden. Für die Verwendung von Hooks sind die folgenden Schritte zu validieren:

Einfachheit ✔
Organisation: In dieser Reihenfolge: zuerst berechnen , dann State instantiieren, Side-Effects beachten, Ereignishandler einrichten, schließlich rendern (). ✔
Code Type-Check, weitere Infos dazu ✔
Styleguide verwenden, um Code-Einheitlichkeit und Integrität zu gewährleisten. ✔