Willkommen in Phase 2: Wir widmen uns jetzt ausführlich den wichtigsten Hooks – Funktionen, mit denen Komponenten sich "in" React-Funktionalität wie State "einklinken" (daher der Name "Hook", englisch für Haken). Den ersten, useState, kennen Sie schon. Jetzt kommt useEffect – einer der wichtigsten, aber auch meistmissverstandenen Hooks.

Was ist ein "Seiteneffekt"?

Das Rendern einer Komponente (die Funktion ausführen und JSX zurückgeben) sollte immer eine "reine" Angelegenheit sein: gleiche Props/State rein, gleiches JSX raus, ohne Nebenwirkungen nach außen. Manche Dinge lassen sich damit aber nicht abbilden: Daten von einem Server laden, den Browser-Tab-Titel ändern, einen Timer starten, auf ein Browser-Event lauschen. Das sind Seiteneffekte ("Side Effects") – Dinge, die außerhalb des reinen Renderns passieren. Dafür gibt es useEffect.

useEffect() Grundlagen

import { useEffect } from 'react';

function Beispiel() {
  useEffect(() => {
    console.log('Die Komponente wurde gerendert (oder neu gerendert)');
  });

  return <p>Hallo</p>;
}

Ohne zweites Argument läuft die Effekt-Funktion nach JEDEM Rendern – meist nicht, was Sie wollen. Das zweite Argument, das "Dependency Array", steuert genau, WANN der Effekt erneut laufen soll:

Praxisbeispiel: den Browser-Tab-Titel synchron halten

Ein klassischer, echter Seiteneffekt: der Browser-Tab-Titel liegt außerhalb des von React kontrollierten <div id="root"> und muss über die Browser-API document.title gesetzt werden. Erweitern Sie src/App.jsx:

import { useEffect } from 'react';
import ProductCard from './components/ProductCard';

const SAMPLE_PRODUCTS = [
  { sku: 'schuhe-01', name: 'Wanderschuhe', price: 89.99, imageUrl: 'https://picsum.photos/seed/1/300' },
  { sku: 'rucksack-01', name: 'Trekking-Rucksack', price: 59.5, imageUrl: 'https://picsum.photos/seed/2/300' },
  { sku: 'jacke-01', name: 'Regenjacke', price: 74.0, imageUrl: 'https://picsum.photos/seed/3/300' },
];

function App() {
  useEffect(() => {
    document.title = `Produktkatalog (${SAMPLE_PRODUCTS.length} Produkte)`;
  }, []);

  return (
    <div className="app">
      <h1>Produktkatalog</h1>
      <div className="product-grid">
        {SAMPLE_PRODUCTS.map((produkt) => (
          <ProductCard
            key={produkt.sku}
            name={produkt.name}
            price={produkt.price}
            imageUrl={produkt.imageUrl}
            onSelect={() => alert(produkt.name + ' angeklickt')}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

Speichern Sie und schauen Sie auf den Browser-Tab: "Produktkatalog (3 Produkte)". Das leere Array [] sorgt dafür, dass dieser Code nur EINMAL läuft, direkt nachdem die Komponente zum ersten Mal angezeigt wurde – vergleichbar mit dem DOMContentLoaded-Event.

Die Aufräumfunktion (Cleanup)

Manche Effekte müssen "aufgeräumt" werden, wenn die Komponente verschwindet oder der Effekt erneut läuft – z. B. ein Timer, der sonst weiterläuft, obwohl die Komponente längst weg ist. Dafür kann die Effekt-Funktion selbst eine Funktion zurückgeben:

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('Tick');
  }, 1000);

  return () => {
    clearInterval(timerId); // läuft, bevor der Effekt erneut ausgeführt wird ODER die Komponente verschwindet
  };
}, []);