Snippet

Fetching Remote Data with Async/Await Inside React Effects

Asynchronous operations in React cannot make the useEffect callback itself an async function. Instead, declare an inner async function and invoke it immediately to await HTTP promises cleanly.

snippet.js

javascript

import { useState, useEffect } from 'react';
 
function UserProfile() {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    async function loadUserData() {
      const response = await fetch('https://api.example.com/user/1');
      const data = await response.json();
      setUser(data);
    }
    loadUserData();
  }, []);
 
  return <div>{user ? user.name : 'Loading...'}</div>;
}

react

Breakdown

async function loadUserData() {

Defines a nested asynchronous function capable of using the await keyword.

const response = await fetch('https://api.example.com/user/1');

Asynchronously requests data over HTTP and pauses execution until resolved.

setUser(data);

Updates the component state once asynchronous JSON parsing completes.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Fetching Remote Data with Async/Await Inside React Effects

Related