0Pricing
React Academy · Lektion

Was StrictMode bewirkt

Verstehen Sie doppelte Aufrufe und Warnungen zu veralteten APIs in der Entwicklung.

Was StrictMode bewirkt ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion lernen Sie, was React.StrictMode in der Entwicklungsumgebung tut, welche Warnungen es sichtbar macht und wie es Sie dabei unterstützt, sichereren React-Code zu schreiben.

Was ist StrictMode?

StrictMode ist eine spezielle React-Komponente, die einen Teil Ihres Komponentenbaums umschließt und **nur in der Entwicklungsumgebung** zusätzliche Prüfungen aktiviert. Der Produktions-Build bleibt davon vollständig unbeeinflusst.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Doppelte Aufrufe des Lebenszyklus

Im Strict Mode ruft React Ihre Komponentenfunktion und einige Lifecycle-Methoden in der Entwicklungsumgebung absichtlich **zweimal** auf. Dadurch sollen Seiteneffekte sichtbar werden, die nicht ordnungsgemäß bereinigt werden.

Warum der doppelte Aufruf?

React 18+ kann Komponenten künftig erneut mounten, zum Beispiel für Fast Refresh und die Offscreen API. Der doppelte Aufruf in der Entwicklungsumgebung simuliert dieses Verhalten, sodass Sie Fehler wie sich anhäufende Subscriptions oder zweimal ausgeführte DOM-Änderungen erkennen.

Mount–Unmount–Remount eines Effekts

Bei StrictMode in React 18 wird jeder useEffect beim ersten Mount ausgeführt, bereinigt und erneut ausgeführt. Wenn Ihre Cleanup-Funktion korrekt ist, bleibt die doppelte Ausführung folgenlos. Wenn Ihre App dadurch fehlschlägt, fehlt die Cleanup-Funktion oder sie ist fehlerhaft.
useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

Veraltete APIs erkennen

StrictMode warnt, wenn Ihr Code veraltete React-APIs wie `componentWillMount`, `componentWillReceiveProps` und String-Refs verwendet. Diese Warnungen erscheinen als gelbe Warnungen in der Browserkonsole.

Warnung zur Legacy Context API

Wenn eine Bibliothek eines Drittanbieters die Legacy Context API (`childContextTypes` / `getChildContext`) verwendet, gibt StrictMode eine Warnung aus. Dies weist darauf hin, dass die Bibliothek auf die moderne `React.createContext` API aktualisiert werden muss.

Sicher in bestehenden Apps aktivierbar

Sie können nur einen Teil Ihres Komponentenbaums mit StrictMode umschließen, um ihn in einer bestehenden App schrittweise zu aktivieren. Beginnen Sie mit neuen Bereichen und erweitern Sie den Geltungsbereich, sobald Sie die Warnungen behoben haben.
function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

Kein visueller Unterschied

StrictMode rendert keine sichtbare Benutzeroberfläche. Es ist ausschließlich ein Entwicklungswerkzeug. Im DOM erscheinen keine zusätzlichen Elemente – nur zusätzliche Konsolenwarnungen und das Verhalten mit den doppelten Aufrufen.

Von Anfang an aktivieren

Am besten aktivieren Sie StrictMode bereits am Anfang eines Projekts. Probleme durch doppelte Aufrufe früh zu beheben ist deutlich günstiger, als sie später in einer großen Codebasis zu entdecken.

Kurzer Test

Welchen Zweck hat es, dass React StrictMode Komponentenfunktionen doppelt aufruft?

Zusammenfassung

StrictMode ist ein kostenloses Entwicklungswerkzeug, das Render-Vorgänge und Effekte doppelt aufruft, um nicht-puren Code zu erkennen, vor veralteten APIs warnt und Ihre App auf künftige React-Funktionen vorbereitet.

Als Nächstes

Nächste Lektion: **Pure Komponenten und das Vermeiden von Seiteneffekten beim Rendern** – Sie lernen, Render-Funktionen ohne Mutationen und externe Lesezugriffe zu schreiben.

Häufig gestellte Fragen

Ist die Lektion „Was StrictMode bewirkt“ kostenlos?

Ja — der vollständige Text von „Was StrictMode bewirkt“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Was StrictMode bewirkt“?

Verstehen Sie doppelte Aufrufe und Warnungen zu veralteten APIs in der Entwicklung. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Was StrictMode bewirkt“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Was StrictMode bewirkt
  2. Pure Components und Seiteneffekte beim Rendern vermeiden
  3. Best Practices für Keys und Refs
  4. Ordnerstruktur und Namenskonventionen
← Zurück zu React Academy