React Academy · Les

Wat StrictMode doet

Begrijp dubbele aanroepen en waarschuwingen over verouderde API's tijdens ontwikkeling.

Les 1 van 413 stappen

Wat StrictMode doet is een gratis React Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Welkom

In deze les leer je wat React.StrictMode in de ontwikkelomgeving doet, welke waarschuwingen het zichtbaar maakt en hoe het je helpt veiligere React-code te schrijven.

Wat is StrictMode?

StrictMode is een speciale React-component die een deel van je boom omhult en extra controles **alleen in de ontwikkelomgeving** inschakelt. Het heeft geen enkel effect op de productie-build.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

Levenscyclus tweemaal aanroepen

In Strict Mode roept React je componentfunctie en sommige levenscyclusmethoden in de ontwikkelomgeving expres **tweemaal** aan. Zo worden bijwerkingen zichtbaar die niet goed worden opgeruimd.

Waarom tweemaal aanroepen?

React 18+ kan componenten in de toekomst opnieuw mounten (bijvoorbeeld voor fast-refresh en de Offscreen API). Door ze in de ontwikkelomgeving tweemaal aan te roepen, simuleert React dit gedrag, zodat je bugs ontdekt zoals abonnementen die zich opstapelen of DOM-mutaties die tweemaal worden uitgevoerd.

Effect mounten, unmounten en opnieuw mounten

Met StrictMode in React 18 wordt elke useEffect bij de eerste mount uitgevoerd, opgeruimd en opnieuw uitgevoerd. Als je opruimfunctie correct is, is deze dubbele uitvoering onschadelijk. Als je app stukgaat, ontbreekt de opruimfunctie of werkt die niet goed.

useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

Verouderde API's opsporen

StrictMode waarschuwt wanneer je code verouderde React-API's gebruikt, zoals `componentWillMount`, `componentWillReceiveProps` en refs als tekenreeksen. Deze waarschuwingen verschijnen als gele waarschuwingen in de browserconsole.

Waarschuwing over de verouderde Context-API

Als een bibliotheek van derden de verouderde Context-API gebruikt (`childContextTypes` / `getChildContext`), geeft StrictMode een waarschuwing. Dit betekent dat de bibliotheek moet worden bijgewerkt naar de moderne `React.createContext`-API.

Veilig in bestaande apps in te schakelen

Je kunt slechts een deel van je componentenboom in StrictMode onderbrengen om het geleidelijk in een bestaande app in te schakelen. Begin met nieuwe gedeelten en breid het uit terwijl je waarschuwingen oplost.

function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

Geen visueel verschil

StrictMode rendert geen zichtbare UI. Het is uitsluitend een hulpmiddel voor de ontwikkelomgeving. Je ziet geen extra elementen in de DOM — alleen extra consolewaarschuwingen en het gedrag waarbij functies tweemaal worden aangeroepen.

Vanaf dag één inschakelen

De beste aanpak is om StrictMode vanaf het begin van een project in te schakelen. Problemen door tweemaal aanroepen vroeg oplossen is veel goedkoper dan ze pas te ontdekken wanneer de codebase groot is.

Korte controle

Wat is het doel van het tweemaal aanroepen van componentfuncties door React StrictMode?

Beantwoord dit in de interactieve les

Samenvatting

StrictMode is een hulpmiddel voor de ontwikkelomgeving zonder runtimekosten. Het roept renders en effecten tweemaal aan om niet-pure code op te sporen, waarschuwt voor verouderde API's en bereidt je app voor op toekomstige React-functies.

Hierna

Volgende les: **Pure componenten en bijwerkingen tijdens het renderen vermijden** — je leert renderfuncties te schrijven zonder mutaties en externe leesacties.

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Wat StrictMode doet” gratis?

Ja — de volledige tekst van “Wat StrictMode doet” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “Wat StrictMode doet”?

Begrijp dubbele aanroepen en waarschuwingen over verouderde API's tijdens ontwikkeling. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Wat StrictMode doet”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Wat StrictMode doet
Pure componenten en side effects in render vermijden
Best practices voor keys en refs
Mappenstructuur en naamgevingsconventies

← Terug naar React Academy