{"id":63055,"date":"2023-06-22T08:54:38","date_gmt":"2023-06-22T07:54:38","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=63055&post_type=knowledgebase&preview_id=63055"},"modified":"2025-10-01T20:15:28","modified_gmt":"2025-10-01T19:15:28","slug":"react-useeffect","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/react-useeffect\/","title":{"rendered":"Entmystifizierung des useEffect Hooks von React"},"content":{"rendered":"

React<\/a> ist eine der beliebtesten JavaScript-Bibliotheken<\/a> f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen. Wenn du diese Benutzeroberfl\u00e4chen baust, musst du m\u00f6glicherweise Nebeneffekte ausf\u00fchren, z. B. Daten von einer API<\/a> abrufen, Ereignisse abonnieren oder das DOM manipulieren.<\/p>\n

An dieser Stelle kommt der leistungsstarke useEffect<\/code> Hook ins Spiel. Er erm\u00f6glicht es dir, diese Nebeneffekte deklarativ und effizient zu handhaben und sicherzustellen, dass deine Benutzeroberfl\u00e4che reaktionsschnell und aktuell bleibt.<\/p>\n

Egal, ob du neu in React bist oder ein erfahrener Entwickler<\/a>, useEffect<\/code> zu verstehen und zu beherrschen ist unerl\u00e4sslich, um robuste und dynamische Anwendungen zu erstellen. In diesem Artikel erf\u00e4hrst du, wie der useEffect<\/code> Hook funktioniert und wie du ihn in deinem React-Projekt einsetzen kannst.
\n

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

Was ist ein Nebeneffekt in React?<\/h2>\n

Bei der Arbeit mit React-Komponenten kommt es immer wieder vor, dass wir mit Entit\u00e4ten interagieren oder Aktionen au\u00dferhalb des React-Bereichs durchf\u00fchren m\u00fcssen. Diese externen Interaktionen werden als Nebeneffekte<\/strong>\u00a0bezeichnet.<\/p>\n

In React sind die meisten Komponenten reine Funktionen, d. h. sie erhalten Eingaben (props) und produzieren vorhersehbare Ausgaben (JSX), wie im folgenden Beispiel zu sehen:<\/p>\n

export default function App() {\n  return <User userName=\"JaneDoe\" \/>   \n}\n  \nfunction User(props) {\n  return <h1>{props.userName}<\/h1>; \/\/ John Doe\n}<\/code><\/pre>\n
Die Nebeneffekte sind jedoch nicht vorhersehbar, weil sie Interaktionen au\u00dferhalb des \u00fcblichen Anwendungsbereichs von React beinhalten.<\/p>\n
Nehmen wir ein Beispiel, bei dem du den Titel des Browser-Tabs dynamisch \u00e4ndern m\u00f6chtest, um die userName<\/code> des Nutzers anzuzeigen. Es mag zwar verlockend sein, dies direkt in der Komponente zu tun, aber das ist nicht der empfohlene Ansatz, da dies als Nebeneffekt gilt:<\/p>\n
const User = ({ userName }) => {\n  document.title = `Hello ${userName}`; \/\/ \u274cNever do this in the component body \u2014 It is a side effect.\n\n  return <h1>{userName}<\/h1>;\n}<\/code><\/pre>\n
Das Ausf\u00fchren von Nebeneffekten direkt innerhalb des Komponentenk\u00f6rpers kann den Rendering-Prozess unserer React-Komponente beeintr\u00e4chtigen.<\/p>\n
Um St\u00f6rungen zu vermeiden, solltest du die Nebeneffekte so abtrennen, dass sie erst gerendert werden oder funktionieren, nachdem unsere Komponente gerendert wurde, um eine klare Trennung zwischen dem Rendering-Prozess und allen notwendigen externen Interaktionen zu gew\u00e4hrleisten. Diese Trennung wird mit dem useEffect<\/code> Hook vorgenommen.<\/p>\n
Verstehen der Grundlagen von useEffect<\/h2>\n
Der useEffect<\/code> Hook wurde entwickelt, um Lebenszyklusmethoden wie componentDidMount<\/code>, componentDidUpdate<\/code> und componentWillUnmount<\/code> zu imitieren, die in Klassenkomponenten zu finden sind.<\/p>\n
Um useEffect<\/code> zu verwenden, musst du ihn aus „react“ importieren und ihn dann innerhalb einer Funktionskomponente<\/a> (auf der obersten Ebene der Komponente) aufrufen. Sie nimmt zwei Argumente entgegen: eine Callback-Funktion und ein optionales Abh\u00e4ngigkeits-Array.<\/p>\n
useEffect(callbackFn, [dependencies]);<\/code><\/pre>\n
Dies kann besser geschrieben werden als:<\/p>\n
useEffect(() => {\n  \/\/ code to run when the effect is triggered\n}, [dependencies]);<\/code><\/pre>\n