React

Wat is useEffect en hoe werk je met side effects?

useEffect voert code uit na render.

Home/Categorieën/React/Wat is useEffect en hoe werk je met side effects?

useEffect basics

useEffect(callback, {dependencies]) Wanneer dependencies veranderen, callback runs Leeg array: only on mount Geen array: every render

Code Voorbeelden

JAVASCRIPTuseEffect fetch
import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    fetch('/api/users')
      .then(r => r.json())
      .then(data => setUsers(data));
  }, []); // Only on mount
  
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Relevante trefwoorden

useEffectside effectsdependencies