𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀

𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗣𝗿𝗶𝗻𝘇𝗶𝗽𝗶𝗲𝗻

Hör auf, useEffect für alles zu verwenden. Viele Entwickler verwenden diesen Hook falsch. Dies führt zu Bugs und macht den Code schwer lesbar.

Begrenze die Nutzung von useEffect.

Versuche, nur einen useEffect pro Seite zu verwenden. Die Verwendung vieler Hooks für denselben State sorgt für Verwirrung. Man verliert den Überblick darüber, welcher Hook welchen State aktualisiert.

Hör auf, useEffect für Benutzerereignisse zu verwenden.

Nutze useEffect nicht für Klicks oder Taps. Verwende stattdessen Event-Handler.

• Schlecht: useEffect verwenden, um den State nach einem Klick zu aktualisieren.
• Gut: Eine Funktion wie onClickBar verwenden, um den State zu aktualisieren.

Event-Typen, die du kennen solltest:

• Seiten-Navigation und initiales Rendern.
• Änderungen der Netzwerkverbindung.
• WebSocket- oder Echtzeit-Server-Updates.

Benutzeraktionen wie Klicks gehören nicht in useEffect. Verwende für diese Aktionen direkte Event-Handler.

Teile Komponenten nach Props auf.

Wenn du ein Boolean-Prop verwendest, um die Logik zu ändern, teile deine Komponente auf. Erstelle keine einzelne Komponente, die sowohl das Erstellen als auch das Aktualisieren von Daten übernimmt.

Eine einzige Komponente mit vielen „if“-Anweisungen wird zu groß. Dies macht die App schwer wartbar.

• Schlecht: Eine Komponente mit einem „isAdd“-Prop, der Formularfelder ändert.
• Gut: Erstelle eine „RegisterComponent“ und eine „UpdateComponent“.

Kleine Komponenten sind leichter zu testen. Sie laufen schneller. Sie bleiben übersichtlich.

Quelle: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31