Wann man useEffect in React vermeiden sollte, um seinen Code zu optimieren

In React-Projekten verwenden wir oft reflexartig useEffect, aber dieser Ansatz kann deinen Code manchmal unnötig verkomplizieren. In diesem Artikel schauen wir uns Fälle an, in denen du useEffect nicht brauchst und wie du deinen Code optimieren kannst, indem du es vermeidest.

Die Rolle von useEffect verstehen

Der useEffect-Hook ist nützlich für die Verwaltung von Seiteneffekten wie Abonnements oder Operationen, die außerhalb des Hauptrenderingflusses ausgeführt werden müssen. Allerdings können einige häufige Anwendungsfälle ohne useEffect vereinfacht werden.

1. Zustand ohne useEffect initialisieren

Oft möchtest du einen Zustand basierend auf Props oder Initialwerten beim Montieren der Komponente initialisieren. Anstatt useEffect zu verwenden, kannst du dies direkt mit useState tun, was deinen Code klarer macht und unnötige Aufrufe verhindert.

Schlechte Praxis mit useEffect:

typescript
1import { useState, useEffect } from "react";
2
3interface GreetingProps {
4  name: string;
5}
6
7function Greeting({ name }: GreetingProps) {
8  const [greeting, setGreeting] = useState<string>("");
9
10  useEffect(() => {
11    setGreeting(`Hallo, ${name}`);
12  }, [name]);
13
14  return <h1>{greeting}</h1>;
15}

Gute Praxis ohne useEffect:

Hier können wir den greeting-Zustand einfach mit einer Funktion in useState initialisieren:

typescript
1import { useState } from "react";
2
3interface GreetingProps {
4  name: string;
5}
6
7function Greeting({ name }: GreetingProps) {
8  const [greeting] = useState<string>(() => `Hallo, ${name}`);
9
10  return <h1>{greeting}</h1>;
11}

Dieser Ansatz macht den Code prägnanter und vermeidet einen überflüssigen Effekt, der deine Anwendung verlangsamen könnte.

2. Abgeleitete Werte berechnen

Wenn du einen Wert basierend auf Zustand oder Props berechnen musst, versuche eine abgeleitete Variable oder memo zu verwenden, anstatt useEffect.

Beispiel mit useEffect (zu vermeiden):

typescript
1import { useState, useEffect } from "react";
2
3interface CartItem {
4  price: number;
5}
6
7interface CartProps {
8  items: CartItem[];
9}
10
11function Cart({ items }: CartProps) {
12  const [total, setTotal] = useState<number>(0);
13
14  useEffect(() => {
15    setTotal(items.reduce((sum, item) => sum + item.price, 0));
16  }, [items]);
17
18  return <p>Gesamt: ${total}</p>;
19}

Lösung ohne useEffect:

Hier kann der total-Wert direkt während des Renderns berechnet werden, ohne von useEffect abhängig zu sein:

typescript
1interface CartItem {
2  price: number;
3}
4
5interface CartProps {
6  items: CartItem[];
7}
8
9function Cart({ items }: CartProps) {
10  const total = items.reduce((sum, item) => sum + item.price, 0);
11
12  return <p>Gesamt: ${total}</p>;
13}

Diese Methode ist nicht nur sauberer, sondern eliminiert auch die Notwendigkeit, zusätzliche Zustände zu verwalten.

3. useMemo für aufwändige Berechnungen verwenden

Für kostspielige oder von mehreren Variablen abhängige Berechnungen verwende useMemo, um zu vermeiden, dass die Logik bei jedem Rendering erneut ausgeführt wird, ohne dass useEffect zur Zustandsverwaltung benötigt wird.

Beispiel mit useEffect:

typescript
1import { useState, useEffect } from "react";
2
3interface ExpensiveCalculationProps {
4  num: number;
5}
6
7function ExpensiveCalculation({ num }: ExpensiveCalculationProps) {
8  const [result, setResult] = useState<number>(0);
9
10  useEffect(() => {
11    const computation = heavyComputation(num);
12    setResult(computation);
13  }, [num]);
14
15  return <p>Ergebnis: {result}</p>;
16}
17
18function heavyComputation(num: number): number {
19  // Simuliert eine kostspielige Berechnung
20  return num * 2; // Vereinfachtes Beispiel
21}

Optimierter Ansatz mit useMemo:

typescript
1import { useMemo } from "react";
2
3interface ExpensiveCalculationProps {
4  num: number;
5}
6
7function ExpensiveCalculation({ num }: ExpensiveCalculationProps) {
8  const result = useMemo(() => heavyComputation(num), [num]);
9
10  return <p>Ergebnis: {result}</p>;
11}
12
13function heavyComputation(num: number): number {
14  // Simuliert eine kostspielige Berechnung
15  return num * 2; // Vereinfachtes Beispiel
16}

Hier ermöglicht useMemo, das Ergebnis zu speichern, ohne einen Effekt verwalten zu müssen, was die Komponente vorhersehbarer und leistungsfähiger macht.

4. Eigenschaften einer kontrollierten Komponente synchronisieren

Für die Verwaltung kontrollierter Eingaben brauchst du kein useEffect, um die Input-Werte mit dem Zustand der übergeordneten Komponente zu synchronisieren. Verwende einfach Props und Callback-Funktionen, um diesen Zustand effizient zu verwalten.

Beispiel mit useEffect (unnötig):

typescript
1import { useState, useEffect } from "react";
2
3interface TextInputProps {
4  value: string;
5  onChange: (value: string) => void;
6}
7
8function TextInput({ value, onChange }: TextInputProps) {
9  const [text, setText] = useState<string>(value);
10
11  useEffect(() => {
12    setText(value);
13  }, [value]);
14
15  return <input value={text} onChange={(e) => onChange(e.target.value)} />;
16}

Lösung ohne useEffect:

typescript
1interface TextInputProps {
2  value: string;
3  onChange: (value: string) => void;
4}
5
6function TextInput({ value, onChange }: TextInputProps) {
7  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
8}

Die direkte Verwendung von Props vereinfacht den Code und verbessert die Leistung durch Reduzierung unnötiger Zustandsaktualisierungen.

5. DOM direkt im Rendering manipulieren

Wenn du Stile oder Klassen basierend auf dem Zustand anwenden möchtest, ist es oft unnötig, useEffect zu verwenden. React handhabt diese Art der Synchronisierung während des Renderings sehr gut.

Beispiel mit useEffect:

typescript
1import { useState, useEffect } from "react";
2
3interface HighlightedTextProps {
4  isHighlighted: boolean;
5  text: string;
6}
7
8function HighlightedText({ isHighlighted, text }: HighlightedTextProps) {
9  const [className, setClassName] = useState<string>("");
10
11  useEffect(() => {
12    setClassName(isHighlighted ? "highlight" : "");
13  }, [isHighlighted]);
14
15  return <span className={className}>{text}</span>;
16}

Lösung ohne useEffect:

typescript
1interface HighlightedTextProps {
2  isHighlighted: boolean;
3  text: string;
4}
5
6function HighlightedText({ isHighlighted, text }: HighlightedTextProps) {
7  return <span className={isHighlighted ? "highlight" : ""}>{text}</span>;
8}

Fazit

Das Vermeiden von useEffect ermöglicht oft, deinen Code zu vereinfachen und die Leistung deiner React-Anwendung zu verbessern. Durch das Überdenken der Gründe für die Verwendung eines Effekts kannst du klarere Komponenten erstellen und Fehler im Zusammenhang mit falsch konfigurierten Abhängigkeiten vermeiden. Der Schlüssel liegt darin, die Fälle zu identifizieren, in denen Zustand, abgeleitete Werte oder useMemo ausreichen, um deine Anforderungen ohne Seiteneffekte zu erfüllen.