React useEffect Endlosschleife: Warum es passiert und wie man es genau behebt

{
“@context”: “https://schema.org”,
“@type”: “TechArticle”,
“headline”: “React useEffect Endlosschleife: Warum es passiert und wie man es genau behebt”,
“description”: “Vollständige Anleitung zur Diagnose und Behebung von React useEffect-Endlosschleifen – Abhängigkeits-Array-Fehler, Objekt-/Funktions-Abhängigkeiten und alle gängigen Muster.”,
“url”: “https://techpulsesite.com/react-useeffect-infinite-loop-why-it-hap-de/”,
“datePublished”: “2026-06-25T16:20:00+00:00”,
“dateModified”: “2026-06-29T04:14:41+00:00”,
“author”: {
“@type”: “Organization”,
“name”: “TechPulse Editorial Team”,
“url”: “https://techpulsesite.com”
},
“publisher”: {
“@type”: “Organization”,
“name”: “TechPulse”,
“url”: “https://techpulsesite.com”
},
“inLanguage”: “de”
}

{
“@context”: “https://schema.org”,
“@type”: “TechArticle”,
“headline”: “React useEffect Endlosschleife: Warum es passiert und wie man es genau behebt”,
“description”: “Vollständige Anleitung zur Diagnose und Behebung von React useEffect-Endlosschleifen – Abhängigkeits-Array-Fehler, Objekt-/Funktions-Abhängigkeiten und alle gängigen Muster.”,
“url”: “https://techpulsesite.com/react-useeffect-infinite-loop-why-it-hap-de/”,
“datePublished”: “2026-06-25T16:20:00+00:00”,
“dateModified”: “2026-06-21T05:59:27+00:00”,
“author”: {
“@type”: “Organization”,
“name”: “TechPulse Editorial Team”,
“url”: “https://techpulsesite.com”
},
“publisher”: {
“@type”: “Organization”,
“name”: “TechPulse”,
“url”: “https://techpulsesite.com”
},
“inLanguage”: “de”
}

A Reagieren Sie auf die useEffect-Endlosschleife ist einer der häufigsten Fehler für Entwickler, die Hooks lernen. Ihre Komponente wird erneut gerendert, löst den Effekt aus, der ein weiteres Rendering auslöst, das den Effekt erneut auslöst – bis der Browser abstürzt. Hier erfahren Sie, warum es passiert und wie Sie jede Variante genau beheben können.

Warum Endlosschleifen passieren

Bei jedem erneuten Rendern einer React-Komponente werden neue Referenzen für Objekte, Arrays und Funktionen erstellt, die in der Komponente definiert sind. Wenn IhruseEffect Wenn das Abhängigkeitsarray einen dieser Werte enthält, erkennt React bei jedem Rendern eine „neue“ Abhängigkeit – auch wenn die Daten logisch identisch sind – und führt den Effekt erneut aus, wodurch ein erneutes Rendern verursacht und eine weitere Schleife erstellt wird.

Ursache 1: Status ohne Abhängigkeiten festlegen (am häufigsten)

// 🐛 Bug: runs after every render, sets state, causes re-render
useEffect(() => {
  setCount(count + 1); // state update → re-render → effect runs again
}); // no dependency array = runs after EVERY render

// ✅ Fix: empty dependency array = run once on mount only
useEffect(() => {
  setCount(prevCount => prevCount + 1);
}, []); // runs once

Ursache 2: Objekt im Abhängigkeitsarray

// 🐛 Bug: new object reference on every render
function UserProfile({ userId }) {
  const options = { method: 'GET', headers: { 'Auth': 'token' } }; // NEW object each render

  useEffect(() => {
    fetchUser(userId, options);
  }, [options]); // options is always "new" → infinite loop
}

// ✅ Fix 1: move object outside component (if it's static)
const OPTIONS = { method: 'GET', headers: { 'Auth': 'token' } }; // defined once

function UserProfile({ userId }) {
  useEffect(() => {
    fetchUser(userId, OPTIONS);
  }, [userId]); // only depends on userId
}

// ✅ Fix 2: useMemo if the object depends on props
function UserProfile({ userId, token }) {
  const options = useMemo(
    () => ({ method: 'GET', headers: { 'Auth': token } }),
    [token] // only recreates when token changes
  );

  useEffect(() => {
    fetchUser(userId, options);
  }, [userId, options]);
}

Ursache 3: Funktion im Abhängigkeitsarray

// 🐛 Bug: new function reference on every render
function DataFetcher({ id }) {
  const fetchData = async () => { // NEW function each render
    const data = await api.get(id);
    setData(data);
  };

  useEffect(() => {
    fetchData();
  }, [fetchData]); // fetchData is always "new" → infinite loop
}

// ✅ Fix: useCallback to memoize the function
function DataFetcher({ id }) {
  const fetchData = useCallback(async () => {
    const data = await api.get(id);
    setData(data);
  }, [id]); // only recreates when id changes

  useEffect(() => {
    fetchData();
  }, [fetchData]); // stable reference now
}

// ✅ Alternative: define function INSIDE the effect
useEffect(() => {
  const fetchData = async () => {
    const data = await api.get(id);
    setData(data);
  };
  fetchData();
}, [id]); // clean, no useCallback needed

Ursache 4: Statusaktualisierung mit Status als Abhängigkeit

// 🐛 Bug: count is dependency AND being updated inside effect
useEffect(() => {
  const timer = setInterval(() => {
    setCount(count + 1); // depends on count → loop
  }, 1000);
  return () => clearInterval(timer);
}, [count]); // re-runs every time count changes

// ✅ Fix: use functional state update (no dependency on count)
useEffect(() => {
  const timer = setInterval(() => {
    setCount(prev => prev + 1); // no dependency on count needed
  }, 1000);
  return () => clearInterval(timer);
}, []); // runs once, updates count independently

Ursache 5: Array im Abhängigkeitsarray

// 🐛 Bug: new array reference on every render
function List({ items }) {
  const filtered = items.filter(i => i.active); // NEW array each render

  useEffect(() => {
    processItems(filtered);
  }, [filtered]); // always "new" → infinite loop
}

// ✅ Fix: useMemo to stabilize the array
function List({ items }) {
  const filtered = useMemo(
    () => items.filter(i => i.active),
    [items]
  );

  useEffect(() => {
    processItems(filtered);
  }, [filtered]);
}

So debuggen Sie eine beliebige Endlosschleife

1. Fügen Sie console.log vor dem useEffect hinzu: Sehen Sie, wie oft die Komponente erneut gerendert wird.
2. Kommentieren Sie die Statusaktualisierung innerhalb des Effekts aus: Wenn die Schleife stoppt, ist die Statusaktualisierung die Ursache.
3. Protokollieren Sie jede Abhängigkeit: console.log('dep1:', dep1, 'dep2:', dep2) innerhalb des Effekts, um zu sehen, welcher sich geändert hat.
4. Verwenden Sie das ESLint-React-Hooks-Plugin: eslint-plugin-react-hooks kennzeichnet fehlende Abhängigkeiten automatisch.

Kurzanleitung: Wann man die einzelnen Haken verwenden sollte

Häufig gestellte Fragen

F: Wann sollte ich ein leeres Abhängigkeitsarray verwenden?
A: Wenn der Effekt beim Mounten nur einmal ausgeführt werden soll (z. B. Anfangsdaten abrufen, Abonnement einrichten). Seien Sie vorsichtig – es entsteht ein Abschluss über den Anfangszustandswerten.

F: Sollte ich immer alles in das Abhängigkeitsarray aufnehmen?
A: Ja, gemäß den React-Regeln. Wenn das Einbinden von etwas eine Schleife verursacht, besteht die eigentliche Lösung darin, diesen Wert mit useMemo/useCallback zu stabilisieren, und nicht darin, ihn aus Deps zu entfernen.

F: Was ist der Unterschied zwischen useMemo und useCallback?
A: useMemo speichert einen Wert (z. B. ein gefiltertes Array). useCallback Merkt sich eine Funktion. Beides verhindert eine unnötige Neuerstellung bei jedem Rendern.

F: Warum führt React useEffect in der Entwicklung zweimal aus?
A: Der strikte Modus von React 18 führt Effekte in der Entwicklung absichtlich zweimal aus, um Nebenwirkungen zu finden, die nicht richtig behoben werden. Dies passiert in der Produktion nicht.

F: Kann ich die Exhaustive-Deps-Regel von ESLint deaktivieren?
A: Das können Sie, aber Sie sollten nicht. Die Regel existiert, weil fehlende Abhängigkeiten subtile Fehler verursachen. Beheben Sie das zugrunde liegende Problem, anstatt die Warnung zu deaktivieren.

Fazit

React useEffect-Endlosschleifen haben immer eine Ursache:eine Abhängigkeit, die bei jedem Rendern eine neue Referenz erstellt, wodurch der Effekt erneut ausgeführt wird, was ein weiteres Rendern auslöst. Die Lösung besteht immer darin, diese Referenz mithilfe vonuseMemo, useCallback, useRefzu stabilisieren , oder indem Sie den Wert außerhalb der Komponente verschieben. Sobald Sie das mentale Modell „gleiche Referenz = keine Wiederholung“ verinnerlicht haben, können diese Fehler leicht verhindert und schnell behoben werden.