Der useState-Hook von React ist ein wesentliches Werkzeug zum Verwalten des Zustands in Funktionskomponenten, aber man kann leicht auf einige häufige Fallstricke stoßen. Unabhängig davon, ob Sie gerade erst mit React beginnen oder schon eine Weile damit arbeiten, kann die Vermeidung dieser Fehler Sie vor unerwarteten Fehlern und Leistungsproblemen bewahren.

Sehen wir uns 10 häufige Fehler an und wie Sie sie vermeiden können, um saubereren und effizienteren Code zu schreiben.

1. Falscher Anfangszustandstyp

Eines der häufigsten Probleme entsteht, wenn der anfängliche Statustyp nicht mit dem Typ übereinstimmt, der bei Statusaktualisierungen erwartet wird.

❌ Fehler: Nichtübereinstimmung des Anfangszustandstyps

const [count, setCount] = useState(0);
setCount("1"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

✅ Lösung: TypeScript verwenden oder den Typ explizit angeben.

const [count, setCount] = useState(0);
setCount(1); // No issues now.

2. Keine funktionalen Updates verwenden

Beim Aktualisieren des Status basierend auf dem vorherigen Wert kann der direkte Verweis auf den aktuellen Status zu veralteten Werten führen, insbesondere bei asynchronen Vorgängen.

❌ Fehler: Aktuellen Status direkt verwenden

setCount(count   1); // Can cause bugs in async scenarios.

✅ Lösung: Nutzen Sie die funktionale Form für sichere Updates.

setCount((prevCount) => prevCount   1); // Ensures you always have the latest value.

3. Abgeleiteten Zustand speichern

Vermeiden Sie das Speichern von Werten im Status, die von anderen Status oder Requisiten abgeleitet werden können. Dies kann zu unnötigen erneuten Renderings und Synchronisierungsproblemen führen.

❌ Fehler: Abgeleiteten Zustand speichern

const [count, setCount] = useState(0);
const [doubleCount, setDoubleCount] = useState(count * 2);

✅ Lösung: Leiten Sie den Wert während des Renderns ab, anstatt den Status zu verwenden.

const [count, setCount] = useState(0);
const doubleCount = count * 2; // No need to store this in state.

4. Zustandsaktualisierungen innerhalb der Renderphase

Der Aufruf von setState innerhalb der Renderphase ist ein Rezept für Endlosschleifen und Leistungsprobleme.

❌ Fehler: Status beim Rendern festlegen

const [count, setCount] = useState(0);
setCount(1); // Infinite loop!

✅ Lösung: Zustandsänderungen in Event-Handlern oder Effekten auslösen.

const handleClick = () => setCount(1);

5. Direkt mutierender Zustand

React erkennt keine Änderungen, wenn Sie den Zustand direkt ändern, insbesondere bei Arrays oder Objekten.

❌ Fehler: Zustand direkt mutieren

const [items, setItems] = useState([1, 2, 3]);
items.push(4); // Mutation happens here, React won’t re-render!

✅ Lösung: Geben Sie ein neues Array oder Objekt zurück, um erneute Renderings auszulösen.

setItems((prevItems) => [...prevItems, 4]); // Spread to create a new array.

6. Undefinierte oder falsche Typen für den komplexen Zustand

Beim Umgang mit komplexen Zuständen kann es zu Laufzeitproblemen und Verwirrung führen, wenn nicht die richtigen Typen definiert werden.

❌ Fehler: Implizite Typen können zu Fehlern führen

const [user, setUser] = useState({ name: "", age: 0 });
setUser({ name: "John", age: "thirty" }); // Type error: Age should be a number.

✅ Lösung: Definieren Sie die Form des Staates mit den richtigen Typen.

type User = { name: string; age: number };
const [user, setUser] = useState({ name: "", age: 0 });

7. Verwenden des Status für veränderliche Werte (wie Timer)

Die Verwendung von useState für Werte, die sich nicht auf das Rendering auswirken, wie z. B. Timer, führt zu unnötigen erneuten Renderings.

❌ Fehler: Status für veränderliche Werte verwenden

const [timerId, setTimerId] = useState(null);

✅ Lösung: Verwenden Sie useRef für veränderliche Werte, die nicht erneut gerendert werden müssen.

const timerIdRef = useRef(null);

8. Zustandsobjekte werden nicht ordnungsgemäß zusammengeführt

Im Gegensatz zu Klassenkomponenten führt useState Aktualisierungen nicht automatisch zusammen. Wenn Sie dies vergessen, kann dies dazu führen, dass Teile Ihres Staates überschrieben werden.

❌ Fehler: Status überschreiben statt zusammenführen

const [user, setUser] = useState({ name: '', age: 0 });
setUser({ age: 25 }); // The 'name' field is now lost!

✅ Lösung: Verwenden Sie den Spread-Operator, um Statusaktualisierungen zusammenzuführen.

setUser((prevUser) => ({ ...prevUser, age: 25 })); // Merges with existing state.

9. Verwenden des Status für Hochfrequenzaktualisierungen

Das Verfolgen hochfrequenter Werte wie Fensterabmessungen im Status kann aufgrund übermäßiger Neu-Renderings zu Leistungsproblemen führen.

❌ Fehler: Status für häufige Aktualisierungen verwenden

const [size, setSize] = useState(window.innerWidth);
window.addEventListener("resize", () => setSize(window.innerWidth));

✅ Lösung: Verwenden Sie useRef oder debounce, um den Leistungseinbruch zu reduzieren.

const sizeRef = useRef(window.innerWidth);
useEffect(() => {
  const handleResize = () => {
    sizeRef.current = window.innerWidth;
  };
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

10. Angenommen, Statusaktualisierungen erfolgen synchron

Aktualisierungen des Reaktionsstatus erfolgen asynchron, aber viele Entwickler gehen fälschlicherweise davon aus, dass Änderungen sofort angewendet werden.

❌ Fehler: Angenommen, Zustandsänderungen erfolgen unmittelbar

setCount(count   1);
console.log(count); // Logs the old value, not the updated one!

✅ Lösung: Verwenden Sie useEffect, um Statusänderungen zu verfolgen und sicherzustellen, dass der neueste Wert verwendet wird.

useEffect(() => {
  console.log(count); // Logs the updated value after re-render.
}, [count]);

Letzte Gedanken?

Wenn Sie diese UseState-Fallstricke vermeiden, wird Ihr React-Code robuster, lesbarer und leistungsfähiger. Wenn Sie verstehen, wie der Zustandsmechanismus von React funktioniert, und die Best Practices kennen, sparen Sie Zeit beim Debuggen und verbessern Ihr gesamtes Entwicklungserlebnis.

Haben Sie nützliche Tipps oder Fehler, die Sie mitteilen möchten? Schreiben Sie sie unten in die Kommentare! ?