5 typische Fehler bei der React Entwicklung

#1 zu wenige Components
Die richtige Stärke von React kommt erst zur Geltung, wenn man die Components richtig “schneidet”. Grundsätzlich sollte man versuchen, in kleine, isolierten Components zu denken.
Damit man hier die Übersicht nicht verliert, lohnt es sich das Atomic Design Pattern zu verwenden. Hier unterscheidet man zwischen 4 verschiedenen Components-Kategorien:
- Atoms
- Molecules
- Organisms
- Pages
Mehr zum Atomic Design Pattern, findet man bei Google ;)
#2 zu viel Logik und States in Components
Der 2. Punkt geht ein bisschen einher mit dem 1. Punkt. Oft werden die Components einfach mit der Zeit zu groß und komplex. Hier sollte man immer wieder neu hinterfragen, ob es nicht Sinn macht die gewachsene Komponente in einzelne Components aufzuteilen.
Tipp: Als Hilfe kann man versuchen erstmal grundsätzlich die Component ohne eigenen State zu schreiben, also nur mit Props zu steuern. Dadurch zwingt man sich, die Component einfach und isoliert für einen generischen Anwendungsfall zu schreiben.
#3 Mutating State und Prop Variables
Vor allem bei größeren Projekten mit Redux, muss man aufpassen, dass man die State und Props Variablen nicht direkt ändert. Dadurch bricht man das Konzept von React und kann unvorhersehbare (und extrem schwer debug-bare) Bugs erzeugen.
Deshalb immer neue Objekte bzw. Kopien anlegen. Man kann dazu auch die Library immutablejs oder lodash nutzen.
#4 setState ist async
Eine Stolperfalle für Anfänger ist die setState Funktion — diese ist nämlich asyncron. Das heißt also, dass man sich nicht darauf verlassen darf, dass der State direkt ge-updated wird. So etwas hier ist gefährlich:
this.setState({ foo: this.state.foo + 1 });if (this.state.foo > 5) { this.setState({ bar: 20 });}
#5 PureComponents vs. Components
Es sollte versucht werden erstmal grundsätzlich mit PureComponent zu arbeiten. Diese können einen enormen Performance-Boost bringen, da hier eine “Shallow comparsion” bei einem State- und Props-Change gemacht wird, bevor tatsächlich die Komponente gerendert wird. An der Stelle nochmal die Erinnerung, den State korrekt zu updaten.
Webinar / React-Native
Ich veranstalte demnächst ein kostenloses Webinar zum Thema:
Meine Erfahrungen aus 5+ React-Native Projekten
