React Native Performance: Häufige Fehler und Lösungen

React Native Performance-Probleme lösen

React Native ist schnell — wenn man es richtig benutzt. Hier die häufigsten Performance-Killer und wie man sie vermeidet.

1. Unnecessary Re-Renders

// SCHLECHT
const MyComponent = ({ data }) => {
  const processedData = expensiveOperation(data); // Läuft bei jedem Render
  return <View>{processedData}</View>;
};

// GUT
const MyComponent = ({ data }) => {
  const processedData = useMemo(() => expensiveOperation(data), [data]);
  return <View>{processedData}</View>;
};

2. FlatList statt ScrollView für Listen

ScrollView rendert alle Elemente auf einmal. FlatList rendert nur was sichtbar ist — virtualisiert. Bei mehr als 20 Elementen immer FlatList.

3. Bilder optimieren

Bilder in React Native ohne Optimierung sind ein häufiger Performance-Killer. Immer die richtige Bildgröße für das Gerät laden, immer Caching aktivieren.

4. JavaScript Bridge minimieren

Mit der neuen React Native Architecture (JSI) ist die Bridge weniger kritisch — aber JavaScript-Thread nicht blockieren ist weiterhin wichtig.

5. Hermes aktivieren

Hermes ist Facebooks JavaScript Engine optimiert für React Native. In neuen Expo/RN Projekten standardmäßig aktiv — und deutlich schneller als V8.