Bisher waren unsere Komponenten statisch – sie zeigten immer dieselben Werte an. Echte Apps müssen sich aber merken und darauf reagieren, wenn sich etwas ändert: ein Warenkorb-Zähler, ein Suchfeld, ein An/Aus-Schalter. Dafür gibt es useState.

Warum eine normale Variable nicht reicht

In HTML/JavaScript würden Sie mit document.getElementById(...).textContent = ... direkt ins DOM schreiben, um etwas auf dem Bildschirm zu ändern. React funktioniert anders: Sie ändern niemals direkt, was angezeigt wird. Stattdessen ändern Sie einen Zustand (State), und React aktualisiert automatisch alles, was von diesem Zustand abhängt – vergleichbar mit einer Excel-Zelle, die sich automatisch neu berechnet, wenn sich eine andere Zelle ändert, auf die sie verweist.

useState() Grundlagen

import { useState } from 'react';
import { View, Text, Button } from 'react-native';

function WarenkorbZaehler() {
  const [anzahl, setAnzahl] = useState(0);

  return (
    <View>
      <Text>Im Warenkorb: {anzahl}</Text>
      <Button title="+ Hinzufügen" onPress={() => setAnzahl(anzahl + 1)} />
    </View>
  );
}

useState(0) erzeugt einen Zustandswert, der mit 0 startet, und gibt ein Array mit zwei Elementen zurück: den aktuellen Wert (anzahl) und eine Funktion, um ihn zu ändern (setAnzahl). Wichtig: Sie rufen NIE anzahl = 5 direkt auf – immer nur über die Setter-Funktion. Jeder Aufruf von setAnzahl(...) lässt React die Komponente neu zeichnen ("re-rendern") mit dem neuen Wert.

ProductCard.js um Favoriten-Status erweitern

Jetzt erweitern wir unsere echte components/ProductCard.js aus Kapitel 6 um einen Favoriten-Herz-Button. Ersetzen Sie den kompletten Inhalt der Datei durch diese Version:

import { useState } from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';

function ProductCard({ name, price, imageUrl, onPress }) {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <TouchableOpacity style={styles.card} onPress={onPress}>
      <Image source={{ uri: imageUrl }} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.name}>{name}</Text>
        <Text style={styles.price}>{price.toFixed(2)} €</Text>
      </View>
      <TouchableOpacity
        style={styles.favoriteButton}
        onPress={() => setIsFavorite(!isFavorite)}
      >
        <Text style={styles.favoriteIcon}>{isFavorite ? '♥' : '♡'}</Text>
      </TouchableOpacity>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 12,
    marginBottom: 8,
    backgroundColor: '#f9fafb',
    borderRadius: 8,
    alignItems: 'center',
  },
  image: { width: 60, height: 60, borderRadius: 4 },
  info: { marginLeft: 12, flex: 1 },
  name: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#6b7280' },
  favoriteButton: { padding: 8 },
  favoriteIcon: { fontSize: 20, color: '#ef4444' },
});

export default ProductCard;

Neu ist die Zeile const [isFavorite, setIsFavorite] = useState(false); plus der zweite, innen liegende TouchableOpacity-Button mit eigenem onPress. setIsFavorite(!isFavorite) kehrt den booleschen Wert um – von false zu true und zurück. Der Ausdruck {{isFavorite ? '♥' : '♡'}} ist ein "ternärer Operator", die kompakte Kurzform für if/else in einem Ausdruck – sehr gebräuchlich in JSX, weil man dort keine normalen if-Anweisungen schreiben kann. App.js selbst bleibt unverändert, da ProductCard ihren Favoriten-Zustand vollständig selbst verwaltet.