React JS useState Antipatterns

Das Schreiben von sauberem React-Code erfordert ein intelligentes State-Management. Schlechte State-Patterns führen zu Bugs und komplexem Code.

Vermeiden Sie diese vier häufigen Fehler:

  1. Zusammengehörige Daten gruppieren

Erstellen Sie keine separaten State-Hooks für Werte, die sich gemeinsam ändern.

Anstatt:

  • const [x, setX] = useState(0);
  • const [y, setY] = useState(0);

Verwenden Sie ein Objekt:

  • const [position, setPosition] = useState({ x: 0, y: 0 });

Dies hält Ihre Updates sauber und organisiert.

  1. Konfliktierende States vermeiden

Wenn mehrere Booleans denselben Prozess verfolgen, erzeugen Sie Bugs.

Anstatt Folgendes zu haben:

  • isSubmitting
  • isSubmit

Verwenden Sie einen einzelnen Status-String:

  • status: 'TYPING'
  • status: 'SUBMITTING'
  • status: 'SUBMITTED'

Leiten Sie Ihre UI-Logik aus dieser einzigen „Single Source of Truth“ ab.

  1. Redundanten State entfernen

Wenn Sie einen Wert während des Renders berechnen können, legen Sie ihn nicht in den State.

Speichern Sie nicht:

  • firstName
  • lastName
  • fullName

Speichern Sie nur den Vor- und Nachnamen. Berechnen Sie den vollständigen Namen „on the fly“:

  • const fullName = firstName + " " + lastName;

Speichern Sie außerdem niemals Props im State. Der State wird nur einmal initialisiert. Wenn sich Ihre Prop ändert, wird der State nicht aktualisiert. Verwenden Sie die Prop direkt.

  1. Daten-Duplizierung stoppen

Speichern Sie nicht dieselben Daten in zwei verschiedenen States.

Wenn Sie eine Liste von Aufgaben und eine ausgewählte Aufgabe haben, speichern Sie nicht das gesamte Aufgaben-Objekt an beiden Stellen. Dies erschwert Updates.

Stattdessen:

  • Speichern Sie die Liste der Aufgaben.
  • Speichern Sie nur die selectedTaskId.
  • Suchen Sie die Aufgabe während des Renders anhand dieser ID in der Liste.

Dies stellt sicher, dass Ihre ausgewählte Aufgabe immer mit den neuesten Daten in Ihrer Liste übereinstimmt.

Quelle: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9