React Native Academy · Les

De useEffect-hook en dependency-arrays

Begrijp wanneer useEffect wordt uitgevoerd, stuur dit met een dependency-array en ruim subscriptions of timers op door een cleanupfunctie terug te geven.

Les 1 van 413 stappen

De useEffect-hook en dependency-arrays is een gratis React Native Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.

Wat is useEffect?

Met useEffect kunnen functieonderdelen neveneffecten uitvoeren: gegevens ophalen, abonnementen instellen, de DOM aanpassen, timers starten of native API's aanroepen. Neveneffecten mogen niet rechtstreeks in de renderfunctie worden uitgevoerd, omdat renders puur moeten zijn. useEffect wordt nadat het onderdeel op het scherm is gerenderd uitgevoerd.

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    console.log('Component rendered');
    // Side effects go here
  });
}

De afhankelijkheidsmatrix

Het tweede argument van useEffect is de afhankelijkheidsmatrix. React gebruikt deze om te bepalen wanneer het effect opnieuw moet worden uitgevoerd. Als de afhankelijkheidsmatrix ontbreekt, wordt het effect na elke render uitgevoerd. Als deze leeg is ([]), wordt het effect één keer na de eerste render uitgevoerd. Als deze waarden bevat, wordt het effect opnieuw uitgevoerd telkens wanneer een van die waarden verandert.

// Runs after every render
useEffect(() => { ... });

// Runs once on mount
useEffect(() => { ... }, []);

// Runs on mount and whenever userId changes
useEffect(() => { ... }, [userId]);

Gegevens ophalen bij het koppelen

Het meest voorkomende useEffect-patroon is het ophalen van gegevens wanneer een onderdeel voor het eerst wordt gekoppeld. Geef een lege afhankelijkheidsmatrix door om ervoor te zorgen dat het ophalen precies één keer wordt uitgevoerd. Sla het resultaat op in de status en render het in de JSX. React voert het effect uit na de eerste weergave, dus het onderdeel wordt één keer met een lege of laadstatus gerenderd voordat de gegevens binnenkomen.

function PostsScreen() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []); // empty array = run once on mount

  return <FlatList data={posts} ... />;
}

Reactieve afhankelijkheden

Wanneer je wilt dat het effect opnieuw wordt uitgevoerd telkens wanneer een waarde verandert, zoals een zoekopdracht of gebruikers-ID, vermeld je die waarde in de afhankelijkheidsmatrix. React vergelijkt elke afhankelijkheid na elke render met de vorige waarde en voert het effect opnieuw uit als er een is veranderd. Zo ontstaat een reactieve gegevensstroom: gebeurtenis in de gebruikersinterface → statusupdate → effect wordt opnieuw uitgevoerd.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/users/' + userId)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, [userId]); // re-fetch whenever userId changes

  if (!user) return <ActivityIndicator />;
  return <Text>{user.name}</Text>;
}

De opruimfunctie

Retourneer vanuit je effect een functie om op te ruimen. React roept deze opruimfunctie aan voordat het effect opnieuw wordt uitgevoerd (bij wijzigingen in afhankelijkheden) en wanneer het onderdeel wordt ontkoppeld. Gebruik deze om abonnementen te annuleren, timers te wissen of fetch-aanvragen af te breken, zodat geheugenlekken en statusupdates op ontkoppelde onderdelen worden voorkomen.

useEffect(() => {
  const timer = setInterval(() => {
    setTime(Date.now());
  }, 1000);

  return () => clearInterval(timer); // cleanup on unmount or re-run
}, []);

Fetch-aanvragen annuleren met AbortController

Wanneer een onderdeel wordt ontkoppeld voordat een fetch is voltooid, geeft React een waarschuwing over het bijwerken van de status van een ontkoppeld onderdeel. Gebruik AbortController om de lopende fetch in de opruimfunctie te annuleren. Door de afbreekfout, die een AbortError is, op te vangen, voorkom je dat deze als een onverwachte fout wordt geregistreerd.

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/data', { signal: controller.signal })
    .then((res) => res.json())
    .then((data) => setData(data))
    .catch((err) => {
      if (err.name !== 'AbortError') setError(err);
    });

  return () => controller.abort();
}, []);

Code alleen bij ontkoppelen uitvoeren

Om code alleen uit te voeren wanneer het onderdeel wordt ontkoppeld, bijvoorbeeld om je af te melden voor een gebeurtenislistener, retourneer je een opruimfunctie vanuit een useEffect met een lege afhankelijkheidsmatrix. React roept de opruimfunctie alleen aan wanneer het onderdeel de boomstructuur verlaat, nooit bij volgende renders.

useEffect(() => {
  const subscription = eventEmitter.addListener('change', handler);

  return () => {
    subscription.remove(); // only on unmount
  };
}, []); // empty array = mount-only effect

Meerdere useEffect-aanroepen

Je kunt en moet meerdere aanroepen van useEffect in één onderdeel gebruiken — één voor elk onafhankelijk neveneffect. React voert ze na elke render uit in de volgorde waarin ze voorkomen. Door effecten per verantwoordelijkheid gescheiden te houden, blijft de code leesbaarder en voorkom je complexe afhankelijkheidsmatrices waarin niet-gerelateerde logica wordt gecombineerd.

// Effect 1: fetch user data
useEffect(() => {
  fetchUser(userId).then(setUser);
}, [userId]);

// Effect 2: analytics page view
useEffect(() => {
  analytics.logScreenView('Profile');
}, []);

// Effect 3: sync title to header
useEffect(() => {
  navigation.setOptions({ title: user?.name ?? 'Profile' });
}, [user, navigation]);

Valkuilen bij afhankelijkheden: ontbrekende afhankelijkheden

Een veelvoorkomende fout is dat je een afhankelijkheid weglaat uit de matrix. Het effect legt dan een verouderde waarde van de ontbrekende afhankelijkheid vast en wordt uitgevoerd met verouderde gegevens. Neem altijd elke waarde uit de scope van het onderdeel op die binnen het effect wordt gelezen. De regel react-hooks/exhaustive-deps van ESLint spoort deze automatisch op.

// Bug: fetchUser uses userId but it is not in deps
// If userId changes, the effect still runs with the old userId
useEffect(() => {
  fetchUser(userId).then(setUser);
}, []); // Missing userId!

// Correct:
useEffect(() => {
  fetchUser(userId).then(setUser);
}, [userId]);

Oneindige lussen voorkomen

Als je effect state bijwerkt die ook als dependency is opgegeven, krijg je een oneindige lus: renderen → effect → state bijwerken → renderen → effect → .... Voorkom dit met een voorwaarde in het effect, of herstructureer je code zodat het effect niet de state-update triggert waardoor het werd uitgevoerd.

// Infinite loop: effect updates 'count' which is in deps
useEffect(() => {
  setCount(count + 1); // triggers re-render → effect runs again
}, [count]);

// Fix: use functional updater — no need to list count as dep
useEffect(() => {
  setCount((c) => c + 1);
}, []); // only runs once

Effecten vergelijken met lifecycle-methoden

useEffect vervangt alle drie klassieke lifecycle-methoden van class-componenten: componentDidMount (lege deps-array), componentDidUpdate (met deps) en componentWillUnmount (cleanup-functie). Eén hook verwerkt alle drie de fasen, waardoor gerelateerde logica bij elkaar blijft in plaats van verspreid te zijn over drie afzonderlijke methoden.

useEffect(() => {
  // componentDidMount equivalent — fetch initial data
  fetchData();

  return () => {
    // componentWillUnmount equivalent — cancel subscriptions
    cancelSubscription();
  };
}, []); // runs once on mount, cleanup on unmount

Korte controle

Test je begrip van de useEffect-hook en dependency-arrays uit deze les.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd dat useEffect side effects uitvoert na het renderen, dat de dependency-array bepaalt wanneer het effect opnieuw wordt uitgevoerd — leeg betekent één keer bij het mounten, en dat je een cleanup-functie retourneert om subscriptions, timers en fetch-aanvragen bij het unmounten te annuleren. Hierna maken we GET-aanvragen met Axios binnen useEffect.

Gratis beginnen

Leer JavaScript 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: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “De useEffect-hook en dependency-arrays” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “De useEffect-hook en dependency-arrays”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.

Wat leer ik in “De useEffect-hook en dependency-arrays”?

Begrijp wanneer useEffect wordt uitgevoerd, stuur dit met een dependency-array en ruim subscriptions of timers op door een cleanupfunctie terug te geven. Je oefent met React Native 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 Native Academy te beginnen?

Ervaring vooraf is niet nodig. React Native 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 “De useEffect-hook en dependency-arrays”?

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 Native Academy?

Ja. Elke les over React Native 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

← Terug naar React Native Academy