{"id":69446,"date":"2024-03-13T12:12:21","date_gmt":"2024-03-13T11:12:21","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69446&post_type=knowledgebase&preview_id=69446"},"modified":"2025-10-01T20:15:11","modified_gmt":"2025-10-01T19:15:11","slug":"react-hook-useeffect-has-a-missing-dependency","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/react-hook-useeffect-has-a-missing-dependency\/","title":{"rendered":"So behebst du den Fehler „React Hook useEffect Has a Missing Dependency“"},"content":{"rendered":"

Der React<\/a> useEffect<\/code> Hook hat sich seit seiner Einf\u00fchrung in Version 16.8 zu einem beliebten Feature der React-Bibliothek<\/a> entwickelt. Er erm\u00f6glicht es Entwicklern, Seiteneffekte wie das Abrufen von Daten<\/a>, das Aktualisieren des DOM und das Abonnieren von Ereignissen in funktionalen Komponenten auszuf\u00fchren.<\/p>\n

Der useEffect<\/code> Hook kann jedoch manchmal schwierig zu benutzen sein. Eine h\u00e4ufige Fehlermeldung, auf die Entwickler\/innen sto\u00dfen, lautet: „React Hook useEffect has a missing dependency.“.<\/p>\n

In diesem Artikel gehen wir auf die Ursachen dieses Fehlers ein und zeigen verschiedene L\u00f6sungen auf, wie er behoben werden kann.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Was ist die Ursache f\u00fcr den Fehler „React Hook useEffect Has a Missing Dependency“?<\/h2>\n

Der Fehler „React Hook useEffect has a missing dependency“ tritt auf, wenn die useEffect<\/code> Hook ein unvollst\u00e4ndiges oder fehlendes Abh\u00e4ngigkeitsarray hat.<\/p>\n

Das Abh\u00e4ngigkeits-Array ist das zweite Argument im useEffect<\/code> Hook und wird verwendet, um die Variablen anzugeben, von denen der Effekt abh\u00e4ngt. Das bedeutet, dass der Effekt erneut ausgef\u00fchrt wird, wenn sich einer der Werte der im Abh\u00e4ngigkeitsarray angegebenen Variablen \u00e4ndert.<\/p>\n

Wenn eine Variable, von der der Effekt abh\u00e4ngt, nicht im Abh\u00e4ngigkeits-Array enthalten ist, wird der Effekt m\u00f6glicherweise nicht erneut ausgef\u00fchrt, wenn sich der Wert \u00e4ndert. Das kann zu unerwartetem Verhalten und Fehlern in deiner Anwendung f\u00fchren.<\/p>\n

Bei diesem Fehler handelt es sich nicht um einen React-Fehler, sondern um einen ESLint-Fehler. ESLint<\/a> bietet ein Plugin speziell f\u00fcr React, das eine Reihe von Regeln enth\u00e4lt, die Entwicklern helfen sollen, besseren React-Code zu schreiben. Eine dieser Regeln ist die \"react-hooks\/exhaustive-deps\"<\/code> Regel, die den Fehler „React Hook useEffect has a missing dependency“ erkennt.<\/p>\n

Betrachten wir als Beispiel eine funktionale Komponente, die einen Z\u00e4hlstatus hat. Von dieser Komponente wird erwartet, dass sie bei jeder \u00c4nderung eine Nachricht mit dem Wert von count<\/code> auf der Konsole protokolliert:<\/p>\n

import { useState, useEffect } from 'react';\n\nconst App = () => {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log(`You clicked ${count} times`);\n  }, []);\n\n  return (\n    <div>\n      <h1>Hello World<\/h1>\n      <p>Count: {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\n    <\/div>\n  );\n};\n\nexport default App;<\/code><\/pre>\n
Im obigen Beispiel hast du eine funktionale Komponente, die die Hooks useState<\/code> und useEffect<\/code> verwendet. Der Hook useEffect<\/code> wird verwendet, um eine Meldung mit dem Wert der Statusvariablen count<\/code> zu protokollieren, sobald sich dieser \u00e4ndert.<\/p>\n
Beachte jedoch, dass die Variable count<\/code> nicht im zweiten Argument-Array (Abh\u00e4ngigkeits-Array) des useEffect<\/code> Hooks aufgef\u00fchrt ist. Dadurch wird der Fehler „React Hook useEffect has a missing dependency“ ausgel\u00f6st.<\/p>\n
\"React
React Hook useEffect hat eine fehlende Abh\u00e4ngigkeit Fehlermeldung<\/figcaption><\/figure>\n
3 Wege zur Behebung des Fehlers „React Hook useEffect Has a Missing Dependency“<\/h2>\n
Dieser Fehler kann auf verschiedene Arten behoben werden, je nachdem, welchen Ansatz du verwenden m\u00f6chtest. Hier sind die verschiedenen M\u00f6glichkeiten.<\/p>\n