How to Use Async Function in useEffect in React

You cannot make the useEffect callback function itself async, but you can define an async function inside it and call it immediately. This lets you use await for asynchronous tasks like data fetching within useEffect.

Syntax

The useEffect hook accepts a function that runs after the component renders. Since this function cannot be async, you create an async function inside it and call it right away.

Example parts:

• useEffect(() => { ... }, [dependencies]): Runs effect after render and when dependencies change.
• Inside, async function fetchData() { ... }: Defines async function.
• fetchData(): Calls the async function.

javascript

useEffect(() => {
  async function fetchData() {
    // async code here
  }
  fetchData();
}, [dependencies]);

Example

This example shows how to fetch user data from an API when the component mounts using an async function inside useEffect. It updates the state with the fetched data and displays it.

javascript

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchUser() {
      const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
      const data = await response.json();
      setUser(data);
    }
    fetchUser();
  }, []);

  if (!user) return <p>Loading user data...</p>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>City: {user.address.city}</p>
    </div>
  );
}

export default UserProfile;

Output

Loading user data... (initially) then shows user name, email, and city after fetch

Common Pitfalls

Common mistakes when using async in useEffect:

• Making the useEffect callback itself async, which is not allowed and causes React warnings.
• Not handling cleanup or race conditions when the component unmounts before async tasks finish.
• Forgetting to include dependencies in the dependency array, causing stale data or infinite loops.

Correct way is to define and call an async function inside useEffect, not to make the callback async.

javascript

/* Wrong way - async directly on useEffect callback (do NOT do this) */
useEffect(async () => {
  const data = await fetchData();
  setData(data);
}, []);

/* Right way - async function inside useEffect */
useEffect(() => {
  async function load() {
    const data = await fetchData();
    setData(data);
  }
  load();
}, []);

Quick Reference

Tips for using async functions in useEffect:

• Never make the useEffect callback async.
• Define async functions inside useEffect and call them.
• Include all necessary dependencies in the dependency array.
• Handle cleanup if your async task can be canceled or if the component unmounts.

Key Takeaways

Do not make the useEffect callback function async; instead, define and call an async function inside it.

Use async functions inside useEffect to handle asynchronous tasks like data fetching safely.

Always include dependencies in the useEffect dependency array to avoid bugs.

Be mindful of component unmounting and cleanup when using async operations in useEffect.