React

Dependency array mistakes in useEffect - veel gestelde fouten

Foute dependencies = infinite loops en stale data.

Home/Categorieën/React/Dependency array mistakes in useEffect - veel gestelde fouten

Veel voorkomende fouten

Leege array weggelaten >> infinite loops Objects/arrays als dependency >> altijd verschillende reference Vergeten dependency toevoegen >> stale closure Wrong dependencies >> effect te vaak of te weinig

Best practice

Voeg alle variabelen toe die effect gebruikt Use ESLint rule 'exhaustive-deps' Extraheer constants outside effect

Code Voorbeelden

JAVASCRIPTDependency mistakes
// ❌ FOUT: Infinite loop
useEffect(() => {
  fetch('/api/users').then(setUsers);
  // Geen dependencies = runs every render = new function = new reference
});

// ✅ CORRECT: Run once
useEffect(() => {
  fetch('/api/users').then(setUsers);
}, []);

// ❌ FOUT: Object dependencies
useEffect(() => {
  fetch(`/api/user/${user.id}`);
}, [user]); // Object recreated every render!

// ✅ CORRECT: Use specific property
useEffect(() => {
  fetch(`/api/user/${user.id}`);
}, [user.id]);

Relevante trefwoorden

dependenciesuseEffectdebugging
← Terug naar ReactAlle categorieën →