5 typische Fehler bei der React Entwicklung

Jonas Gehring
Nov 8 · 2 min read

#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

Jonas Gehring

Written by

Software-Development | Mobile & IoT | Outsourcing

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade