React

Async/await in useEffect - Common mistakes

Je kan useEffect async nicht direct maken.

Home/Categorieën/React/Async/await in useEffect - Common mistakes

Het probleem

useEffect kan geen promise returnen (collision met cleanup) Async function returns promise Mustnt directly await in dependency

De oplossing

Async function definiëren INSIDE effect Call the async function Or use abort controller for cleanup

Code Voorbeelden

JAVASCRIPTAsync patterns
// ❌ FOUT
useEffect(async () => {
  const data = await fetch('/api/user');
}, []);

// ✅ CORRECT: Define inside
useEffect(() => {
  async function fetchUser() {
    const res = await fetch('/api/user');
    setUser(await res.json());
  }
  fetchUser();
}, []);

// ✅ Best: With AbortController for cleanup
useEffect(() => {
  const controller = new AbortController();
  
  async function fetch() {
    try {
      const res = await fetch('/api/user', {
        signal: controller.signal
      });
      setUser(await res.json());
    } catch (e) {
      if (e.name !== 'AbortError') console.error(e);
    }
  }
  
  fetch();
  return () => controller.abort(); // Cleanup
}, []);

Relevante trefwoorden

asyncawaituseEffect
← Terug naar ReactAlle categorieën →